lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-05-17 02:07:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into feat/dislike-improvement

Browse Source
This commit is contained in:
Alger
2025-09-13 23:59:40 +08:00
committed by GitHub
parent 70677dfb14 e9ef7123e7
commit a9f76c7952
27 changed files with 2120 additions and 1106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/api/music.ts
+120 -50
View File
@@ -9,7 +9,9 @@ import request from '@/utils/request';
import requestMusic from '@/utils/request_music';
import { searchAndGetBilibiliAudioUrl } from './bilibili';
import type { ParsedMusicResult } from './gdmusic';
import { parseFromGDMusic } from './gdmusic';
import { parseFromCustomApi } from './parseFromCustomApi';
const { addData, getData, deleteData } = musicDB;
@@ -30,6 +32,8 @@ export const getMusicUrl = async (id: number, isDownloaded: boolean = false) =>
params: {
id,
level: settingStore.setData.musicQuality || 'higher',
encodeType: settingStore.setData.musicQuality == 'lossless' ? 'aac' : 'flac',
// level为lossless时，encodeType=flac时网易云会返回hires音质，encodeType=aac时网易云会返回lossless音质
cookie: `${localStorage.getItem('token')} os=pc;`
}
});
@@ -45,7 +49,8 @@ export const getMusicUrl = async (id: number, isDownloaded: boolean = false) =>
return await request.get('/song/url/v1', {
params: {
id,
level: settingStore.setData.musicQuality || 'higher'
level: settingStore.setData.musicQuality || 'higher',
encodeType: settingStore.setData.musicQuality == 'lossless' ? 'aac' : 'flac'
}
});
};
@@ -114,7 +119,8 @@ const getBilibiliAudio = async (data: SongResult) => {
* @param data 歌曲数据
* @returns 解析结果，失败时返回null
*/
const getGDMusicAudio = async (id: number, data: SongResult) => {
const getGDMusicAudio = async (id: number, data: SongResult): Promise<ParsedMusicResult | null> => {
// <-- 在这里明确声明返回类型
try {
const gdResult = await parseFromGDMusic(id, data, '999');
if (gdResult) {
@@ -146,59 +152,123 @@ const getUnblockMusicAudio = (id: number, data: SongResult, sources: any[]) => {
* @returns 解析结果
*/
export const getParsingMusicUrl = async (id: number, data: SongResult) => {
if(isElectron){
const settingStore = useSettingsStore();
try {
if (isElectron) {
let musicSources: any[] = [];
let quality: string = 'higher';
try {
const settingStore = useSettingsStore();
const enableMusicUnblock = settingStore?.setData?.enableMusicUnblock;
// 如果禁用了音乐解析功能，则直接返回空结果
if (!settingStore.setData.enableMusicUnblock) {
return Promise.resolve({ data: { code: 404, message: '音乐解析功能已禁用' } });
}
// 1. 确定使用的音源列表(自定义或全局)
const songId = String(id);
const savedSourceStr = localStorage.getItem(`song_source_${songId}`);
let musicSources: any[] = [];
try {
if (savedSourceStr) {
// 使用自定义音源
musicSources = JSON.parse(savedSourceStr);
console.log(`使用歌曲 ${id} 自定义音源:`, musicSources);
} else {
// 使用全局音源设置
musicSources = settingStore.setData.enabledMusicSources || [];
console.log(`使用全局音源设置:`, musicSources);
if (musicSources.length > 0) {
return getUnblockMusicAudio(id, data, musicSources);
// 如果禁用了音乐解析功能，则直接返回空结果
if (!enableMusicUnblock) {
return Promise.resolve({ data: { code: 404, message: '音乐解析功能已禁用' } });
}
// 1. 确定使用的音源列表(自定义或全局)
const songId = String(id);
const savedSourceStr = (() => {
try {
return localStorage.getItem(`song_source_${songId}`);
} catch (e) {
console.warn('读取本地存储失败，忽略自定义音源', e);
return null;
}
})();
if (savedSourceStr) {
try {
musicSources = JSON.parse(savedSourceStr);
console.log(`使用歌曲 ${id} 自定义音源:`, musicSources);
} catch (e) {
console.error('解析音源设置失败，回退到默认全局设置', e);
musicSources = settingStore?.setData?.enabledMusicSources || [];
}
} else {
// 使用全局音源设置
musicSources = settingStore?.setData?.enabledMusicSources || [];
console.log(`使用全局音源设置:`, musicSources);
}
quality = settingStore?.setData?.musicQuality || 'higher';
} catch (e) {
console.error('读取设置失败，使用默认配置', e);
musicSources = [];
quality = 'higher';
}
// 优先级 1: 自定义 API
try {
const hasCustom = Array.isArray(musicSources) && musicSources.includes('custom');
const customEnabled = (() => {
try {
const st = useSettingsStore();
return Boolean(st?.setData?.customApiPlugin);
} catch {
return false;
}
})();
if (hasCustom && customEnabled) {
console.log('尝试使用 自定义API 解析...');
const customResult = await parseFromCustomApi(id, data, quality);
if (customResult) {
return customResult; // 成功则直接返回
}
console.log('自定义API解析失败，继续尝试其他音源...');
}
} catch (e) {
console.error('自定义API解析发生异常，继续尝试其他音源', e);
}
// 优先级 2: Bilibili
try {
if (Array.isArray(musicSources) && musicSources.includes('bilibili')) {
console.log('尝试使用 Bilibili 解析...');
const bilibiliResult = await getBilibiliAudio(data);
if (bilibiliResult?.data?.data?.url) {
return bilibiliResult;
}
console.log('Bilibili解析失败，继续尝试其他音源...');
}
} catch (e) {
console.error('Bilibili解析发生异常，继续尝试其他音源', e);
}
// 优先级 3: GD 音乐台
try {
if (Array.isArray(musicSources) && musicSources.includes('gdmusic')) {
console.log('尝试使用 GD音乐台 解析...');
const gdResult = await getGDMusicAudio(id, data);
if (gdResult) {
return gdResult;
}
console.log('GD音乐台解析失败，继续尝试其他音源...');
}
} catch (e) {
console.error('GD音乐台解析发生异常，继续尝试其他音源', e);
}
// 优先级 4: UnblockMusic (migu, kugou, pyncmd)
try {
const unblockSources = (Array.isArray(musicSources) ? musicSources : []).filter(
(source) => !['custom', 'bilibili', 'gdmusic'].includes(source)
);
if (unblockSources.length > 0) {
console.log('尝试使用 UnblockMusic 解析:', unblockSources);
// 捕获内部可能的异常
return await getUnblockMusicAudio(id, data, unblockSources);
} else {
console.warn('UnblockMusic API 不可用，跳过此解析方式');
}
} catch (e) {
console.error('UnblockMusic 解析发生异常，继续后备方案', e);
}
} catch (e) {
console.error('解析音源设置失败，使用全局设置', e);
musicSources = settingStore.setData.enabledMusicSources || [];
}
// 2. 按优先级解析
// 2.1 Bilibili解析(优先级最高)
if (musicSources.includes('bilibili')) {
return await getBilibiliAudio(data);
}
// 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 (musicSources.length > 0) {
return getUnblockMusicAudio(id, data, musicSources);
}
} catch (e) {
console.error('getParsingMusicUrl 执行异常，将使用后备方案:', e);
}
// 3. 后备方案：使用API请求
// 后备方案：使用API请求
console.log('无可用音源或不在Electron环境中，使用API请求');
return requestMusic.get<any>('/music', { params: { id } });
};
@@ -211,7 +281,7 @@ export const likeSong = (id: number, like: boolean = true) => {
// 将每日推荐中的歌曲标记为不感兴趣，并获取一首新歌
export const dislikeRecommendedSong = (id: number | string) => {
return request.get('/recommend/songs/dislike', {
params: { id }
params: { id }
});
};
// 获取用户喜欢的音乐列表
src/renderer/api/parseFromCustomApi.ts
+107
View File
@@ -0,0 +1,107 @@
import axios from 'axios';
import { get } from 'lodash';
import { useSettingsStore } from '@/store';
import type { ParsedMusicResult } from './gdmusic';
/**
* 定义自定义API JSON插件的结构
*/
interface CustomApiPlugin {
name: string;
apiUrl: string;
method?: 'GET' | 'POST';
params: Record<string, string>;
qualityMapping?: Record<string, string>;
responseUrlPath: string;
}
/**
* 从用户导入的自定义API JSON配置中解析音乐URL
*/
export const parseFromCustomApi = async (
id: number,
_songData: any,
quality: string = 'higher',
timeout: number = 10000
): Promise<ParsedMusicResult | null> => {
const settingsStore = useSettingsStore();
const pluginString = settingsStore.setData.customApiPlugin;
if (!pluginString) {
return null;
}
let plugin: CustomApiPlugin;
try {
plugin = JSON.parse(pluginString);
if (!plugin.apiUrl || !plugin.params || !plugin.responseUrlPath) {
console.error('自定义API：JSON配置文件格式不正确。');
return null;
}
} catch (error) {
console.error('自定义API：解析JSON配置文件失败。', error);
return null;
}
console.log(`自定义API：正在使用插件 [${plugin.name}] 进行解析...`);
try {
// 1. 准备请求参数，替换占位符
const finalParams: Record<string, string> = {};
for (const [key, value] of Object.entries(plugin.params)) {
if (value === '{songId}') {
finalParams[key] = String(id);
} else if (value === '{quality}') {
// 使用 qualityMapping (如果存在) 进行音质翻译，否则直接使用原quality
finalParams[key] = plugin.qualityMapping?.[quality] ?? quality;
} else {
// 固定值参数
finalParams[key] = value;
}
}
// 2. 判断请求方法，默认为GET
const method = plugin.method?.toUpperCase() === 'POST' ? 'POST' : 'GET';
let response;
// 3. 根据方法发送不同的请求
if (method === 'POST') {
console.log('自定义API：发送 POST 请求到:', plugin.apiUrl, '参数:', finalParams);
response = await axios.post(plugin.apiUrl, finalParams, { timeout });
} else {
// 默认为 GET
const finalUrl = `${plugin.apiUrl}?${new URLSearchParams(finalParams).toString()}`;
console.log('自定义API：发送 GET 请求到:', finalUrl);
response = await axios.get(finalUrl, { timeout });
}
// 4. 使用 lodash.get 安全地从响应数据中提取URL
const musicUrl = get(response.data, plugin.responseUrlPath);
if (musicUrl && typeof musicUrl === 'string') {
console.log('自定义API：成功获取URL！');
// 5. 组装成应用所需的标准格式并返回
return {
data: {
data: {
url: musicUrl,
br: parseInt(quality) * 1000,
size: 0,
md5: '',
platform: plugin.name.toLowerCase().replace(/\s/g, ''),
gain: 0
},
params: { id, type: 'song' }
}
};
} else {
console.error('自定义API：根据路径未能从响应中找到URL:', plugin.responseUrlPath);
return null;
}
} catch (error) {
console.error(`自定义API [${plugin.name}] 执行失败:`, error);
return null;
}
};
src/renderer/api/search.ts
+72
View File
@@ -1,3 +1,4 @@
import { isElectron } from '@/utils';
import request from '@/utils/request';
interface IParams {
@@ -12,3 +13,74 @@ export const getSearch = (params: IParams) => {
params
});
};
/**
* 搜索建议接口返回的数据结构
*/
interface Suggestion {
keyword: string;
}
interface KugouSuggestionResponse {
data: Suggestion[];
}
// 网易云搜索建议返回的数据结构（部分字段）
interface NeteaseSuggestResult {
result?: {
songs?: Array<{ name: string }>;
artists?: Array<{ name: string }>;
albums?: Array<{ name: string }>;
};
code?: number;
}
/**
* 从酷狗获取搜索建议
* @param keyword 搜索关键词
*/
export const getSearchSuggestions = async (keyword: string) => {
console.log('[API] getSearchSuggestions: 开始执行');
if (!keyword || !keyword.trim()) {
return Promise.resolve([]);
}
console.log(`[API] getSearchSuggestions: 准备请求，关键词: "${keyword}"`);
try {
let responseData: KugouSuggestionResponse;
if (isElectron) {
console.log('[API] Running in Electron, using IPC proxy.');
responseData = await window.api.getSearchSuggestions(keyword);
} else {
// 非 Electron 环境下，使用网易云接口
const res = await request.get<NeteaseSuggestResult>('/search/suggest', {
params: { keywords: keyword }
});
const result = res?.data?.result || {};
const names: string[] = [];
if (Array.isArray(result.songs)) names.push(...result.songs.map((s) => s.name));
if (Array.isArray(result.artists)) names.push(...result.artists.map((a) => a.name));
if (Array.isArray(result.albums)) names.push(...result.albums.map((al) => al.name));
// 去重并截取前10个
const unique = Array.from(new Set(names)).slice(0, 10);
console.log('[API] getSearchSuggestions: 网易云建议解析成功:', unique);
return unique;
}
if (responseData && Array.isArray(responseData.data)) {
const suggestions = responseData.data.map((item) => item.keyword).slice(0, 10);
console.log('[API] getSearchSuggestions: 成功解析建议:', suggestions);
return suggestions;
}
console.warn('[API] getSearchSuggestions: 响应数据格式不正确，返回空数组。');
return [];
} catch (error) {
console.error('[API] getSearchSuggestions: 请求失败，错误信息:', error);
return [];
}
};
src/renderer/components/cover/Cover3D.vue
+205
View File
@@ -0,0 +1,205 @@
<template>
<div
ref="coverContainer"
class="cover-3d-container relative cursor-pointer"
@mousemove="handleMouseMove"
@mouseleave="handleMouseLeave"
@mouseenter="handleMouseEnter"
>
<div ref="coverImage" class="cover-wrapper" :style="coverTransformStyle">
<n-image :src="src" class="cover-image" lazy preview-disabled :object-fit="objectFit" />
<div class="cover-shine" :style="shineStyle"></div>
</div>
<div v-if="loading" class="loading-overlay">
<i class="ri-loader-4-line loading-icon"></i>
</div>
<slot />
</div>
</template>
<script setup lang="ts">
import { computed, onBeforeUnmount, ref } from 'vue';
interface Props {
src: string;
loading?: boolean;
maxTilt?: number;
scale?: number;
shineIntensity?: number;
objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none';
disabled?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
loading: false,
maxTilt: 12,
scale: 1.03,
shineIntensity: 0.25,
objectFit: 'cover',
disabled: false
});
// 3D视差效果相关
const coverContainer = ref<HTMLElement | null>(null);
const coverImage = ref<HTMLElement | null>(null);
const mouseX = ref(0.5);
const mouseY = ref(0.5);
const isHovering = ref(false);
const rafId = ref<number | null>(null);
// 3D视差效果计算
const coverTransformStyle = computed(() => {
if (!isHovering.value || props.disabled) {
return {
transform: 'perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1)',
transition: 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)'
};
}
const tiltX = Math.round((mouseY.value - 0.5) * props.maxTilt * 100) / 100;
const tiltY = Math.round((mouseX.value - 0.5) * -props.maxTilt * 100) / 100;
return {
transform: `perspective(1000px) rotateX(${tiltX}deg) rotateY(${tiltY}deg) scale(${props.scale})`,
transition: 'none'
};
});
// 光泽效果计算
const shineStyle = computed(() => {
if (!isHovering.value || props.disabled) {
return {
opacity: 0,
background: 'transparent',
transition: 'opacity 0.3s ease-out'
};
}
const shineX = Math.round(mouseX.value * 100);
const shineY = Math.round(mouseY.value * 100);
return {
opacity: props.shineIntensity,
background: `radial-gradient(200px circle at ${shineX}% ${shineY}%, rgba(255,255,255,0.3), transparent 50%)`,
transition: 'none'
};
});
// 使用 requestAnimationFrame 优化鼠标事件
const updateMousePosition = (x: number, y: number) => {
if (rafId.value) {
cancelAnimationFrame(rafId.value);
}
rafId.value = requestAnimationFrame(() => {
// 只在位置有显著变化时更新，减少不必要的重绘
const deltaX = Math.abs(mouseX.value - x);
const deltaY = Math.abs(mouseY.value - y);
if (deltaX > 0.01 || deltaY > 0.01) {
mouseX.value = x;
mouseY.value = y;
}
});
};
// 3D视差效果的鼠标事件处理
const handleMouseMove = (event: MouseEvent) => {
if (!coverContainer.value || !isHovering.value || props.disabled) return;
const rect = coverContainer.value.getBoundingClientRect();
const x = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
const y = Math.max(0, Math.min(1, (event.clientY - rect.top) / rect.height));
updateMousePosition(x, y);
};
const handleMouseEnter = () => {
if (!props.disabled) {
isHovering.value = true;
}
};
const handleMouseLeave = () => {
isHovering.value = false;
if (rafId.value) {
cancelAnimationFrame(rafId.value);
rafId.value = null;
}
// 平滑回到中心位置
updateMousePosition(0.5, 0.5);
};
// 清理资源
onBeforeUnmount(() => {
if (rafId.value) {
cancelAnimationFrame(rafId.value);
}
});
</script>
<style scoped lang="scss">
.cover-3d-container {
@apply w-full h-full;
}
/* 3D视差效果样式 */
.cover-wrapper {
@apply relative w-full h-full rounded-xl overflow-hidden;
transform-style: preserve-3d;
will-change: transform;
backface-visibility: hidden;
transform: translateZ(0); /* 强制硬件加速 */
}
.cover-image {
@apply w-full h-full;
border-radius: inherit;
transform: translateZ(0); /* 强制硬件加速 */
}
.cover-shine {
@apply absolute inset-0 pointer-events-none rounded-xl;
mix-blend-mode: overlay;
z-index: 1;
will-change: background, opacity;
backface-visibility: hidden;
}
/* 为封面容器添加阴影效果 */
.cover-3d-container:hover .cover-wrapper {
filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.25));
}
@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;
}
/* 移动端禁用3D效果 */
@media (max-width: 768px) {
.cover-wrapper {
transform: none !important;
}
.cover-shine {
display: none;
}
}
</style>
src/renderer/components/lyric/MusicFull.vue
+54 -67
View File
@@ -9,24 +9,22 @@
>
<div id="drawer-target" :class="[config.theme]">
<div
class="control-btn absolute top-8 left-8"
class="control-buttons-container absolute top-8 left-8 right-8"
:class="{ 'pure-mode': config.pureModeEnabled }"
@click="closeMusicFull"
>
<i class="ri-arrow-down-s-line"></i>
</div>
<div class="control-btn" @click="closeMusicFull">
<i class="ri-arrow-down-s-line"></i>
</div>
<n-popover trigger="click" placement="bottom">
<template #trigger>
<div
class="control-btn absolute top-8 right-8"
:class="{ 'pure-mode': config.pureModeEnabled }"
>
<i class="ri-settings-3-line"></i>
</div>
</template>
<lyric-settings ref="lyricSettingsRef" />
</n-popover>
<n-popover trigger="click" placement="bottom">
<template #trigger>
<div class="control-btn">
<i class="ri-settings-3-line"></i>
</div>
</template>
<lyric-settings ref="lyricSettingsRef" />
</n-popover>
</div>
<div
v-if="!config.hideCover"
@@ -34,17 +32,15 @@
:class="{ 'only-cover': config.hideLyrics }"
:style="{ color: textColors.theme === 'dark' ? '#000000' : '#ffffff' }"
>
<div class="img-container relative">
<n-image
<div class="img-container">
<cover3-d
ref="PicImgRef"
:src="getImgUrl(playMusic?.picUrl, '500y500')"
class="img"
lazy
preview-disabled
:loading="playMusic?.playLoading"
:max-tilt="12"
:scale="1.03"
:shine-intensity="0.25"
/>
<div v-if="playMusic?.playLoading" class="loading-overlay">
<i class="ri-loader-4-line loading-icon"></i>
</div>
</div>
<div class="music-info">
<div class="music-content-name">{{ playMusic.name }}</div>
@@ -151,6 +147,7 @@ import { useDebounceFn } from '@vueuse/core';
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import Cover3D from '@/components/cover/Cover3D.vue';
import LyricCorrectionControl from '@/components/lyric/LyricCorrectionControl.vue';
import LyricSettings from '@/components/lyric/LyricSettings.vue';
import SimplePlayBar from '@/components/player/SimplePlayBar.vue';
@@ -183,10 +180,8 @@ const isDark = ref(false);
const showStickyHeader = ref(false);
const lyricSettingsRef = ref<InstanceType<typeof LyricSettings>>();
// 移除 computed 配置
const config = ref<LyricConfig>({ ...DEFAULT_LYRIC_CONFIG });
// 监听设置组件的配置变化
watch(
() => lyricSettingsRef.value?.config,
(newConfig) => {
@@ -525,10 +520,12 @@ defineExpose({
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.drawer-back {
@apply absolute bg-cover bg-center;
z-index: -1;
@@ -561,10 +558,6 @@ defineExpose({
@apply w-[50vh] h-[50vh] mb-8;
}
.img {
@apply w-full h-full;
}
.music-info {
@apply text-center w-[600px];
@@ -584,10 +577,6 @@ defineExpose({
@apply relative w-full h-full;
}
.img {
@apply rounded-xl w-full h-full shadow-2xl transition-all duration-300;
}
.music-info {
@apply w-full mt-4;
@@ -610,9 +599,11 @@ defineExpose({
&.center {
@apply w-auto;
.music-lrc {
@apply w-full max-w-3xl mx-auto;
}
.music-lrc-text {
@apply text-center;
}
@@ -697,24 +688,30 @@ defineExpose({
.mobile {
#drawer-target {
@apply flex-col p-4 pt-8 justify-start;
.music-img {
display: none;
}
.music-lrc {
height: calc(100vh - 260px) !important;
width: 100vw;
span {
padding-right: 0px !important;
}
.hover-text {
&:hover {
background-color: transparent;
}
}
.music-lrc-text {
@apply text-xl text-center;
}
}
.music-content {
@apply h-[calc(100vh-120px)];
width: 100vw !important;
@@ -751,8 +748,30 @@ defineExpose({
}
}
.control-buttons-container {
@apply flex justify-between items-start z-[9999];
&.pure-mode {
@apply pointer-events-auto; /* 容器需要能接收hover事件 */
.control-btn {
@apply opacity-0 transition-all duration-300;
pointer-events: none; /* 按钮隐藏时不接收事件 */
}
&:hover .control-btn {
@apply opacity-100;
pointer-events: auto; /* hover时按钮可以点击 */
}
}
&:not(.pure-mode) .control-btn {
pointer-events: auto;
}
}
.control-btn {
@apply w-9 h-9 flex items-center justify-center rounded cursor-pointer transition-all duration-300 z-[9999];
@apply w-9 h-9 flex items-center justify-center rounded cursor-pointer transition-all duration-300;
background: rgba(142, 142, 142, 0.192);
backdrop-filter: blur(12px);
@@ -761,48 +780,16 @@ defineExpose({
color: var(--text-color-active);
}
&.pure-mode {
background: transparent;
backdrop-filter: none;
&:not(:hover) {
i {
opacity: 0;
}
}
}
&:hover {
background: rgba(126, 121, 121, 0.2);
i {
opacity: 1;
}
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading-overlay {
@apply absolute inset-0 flex items-center justify-center rounded-xl;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
}
.loading-icon {
font-size: 48px;
color: white;
animation: spin 1s linear infinite;
}
.lyric-correction {
/* 仅在 hover 歌词区域时显示 */
.music-lrc:hover & {
opacity: 1 !important;
pointer-events: auto !important;
src/renderer/components/settings/MusicSourceSettings.vue
+93 -35
View File
@@ -10,56 +10,84 @@
>
<n-space vertical>
<p>{{ t('settings.playback.musicSourcesDesc') }}</p>
<n-checkbox-group v-model:value="selectedSources">
<n-grid :cols="2" :x-gap="12" :y-gap="8">
<n-grid-item v-for="source in musicSourceOptions" :key="source.value">
<!-- 遍历常规音源 -->
<n-grid-item v-for="source in regularMusicSources" :key="source.value">
<n-checkbox :value="source.value">
{{ source.label }}
<template v-if="source.value === 'gdmusic'">
<n-tooltip>
<template #trigger>
<n-icon size="16" class="ml-1 text-blue-500 cursor-help">
<i class="ri-information-line"></i>
</n-icon>
</template>
{{ t('settings.playback.gdmusicInfo') }}
</n-tooltip>
</template>
{{ t('settings.playback.sourceLabels.' + source.value) }}
<n-tooltip v-if="source.value === 'gdmusic'">
<template #trigger>
<n-icon size="16" class="ml-1 text-blue-500 cursor-help">
<i class="ri-information-line"></i>
</n-icon>
</template>
{{ t('settings.playback.gdmusicInfo') }}
</n-tooltip>
</n-checkbox>
</n-grid-item>
<!-- 单独处理自定义API选项 -->
<n-grid-item>
<n-checkbox value="custom" :disabled="!settingsStore.setData.customApiPlugin">
{{ t('settings.playback.sourceLabels.custom') }}
<n-tooltip v-if="!settingsStore.setData.customApiPlugin">
<template #trigger>
<n-icon size="16" class="ml-1 text-gray-400 cursor-help">
<i class="ri-question-line"></i>
</n-icon>
</template>
{{ t('settings.playback.customApi.enableHint') }}
</n-tooltip>
</n-checkbox>
</n-grid-item>
</n-grid>
</n-checkbox-group>
<div v-if="selectedSources.length === 0" class="text-red-500 text-sm">
{{ t('settings.playback.musicSourcesWarning') }}
</div>
<!-- GD音乐台设置 -->
<div
v-if="selectedSources.includes('gdmusic')"
class="mt-4 border-t pt-4 border-gray-200 dark:border-gray-700"
>
<h3 class="text-base font-medium mb-2">GD音乐台(music.gdstudio.xyz)设置</h3>
<p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
GD音乐台将自动尝试多个音乐平台进行解析，无需额外配置。优先级高于其他解析方式，但是请求可能较慢。感谢（music.gdstudio.xyz）
</p>
<!-- 分割线 -->
<div class="mt-4 border-t pt-4 border-gray-200 dark:border-gray-700"></div>
<!-- 自定义API导入区域 -->
<div>
<h3 class="text-base font-medium mb-2">
{{ t('settings.playback.customApi.sectionTitle') }}
</h3>
<div class="flex items-center gap-4">
<n-button @click="importPlugin" size="small">{{
t('settings.playback.customApi.importConfig')
}}</n-button>
<p v-if="settingsStore.setData.customApiPluginName" class="text-sm">
{{ t('settings.playback.customApi.currentSource') }}:
<span class="font-semibold">{{ settingsStore.setData.customApiPluginName }}</span>
</p>
<p v-else class="text-sm text-gray-500">
{{ t('settings.playback.customApi.notImported') }}
</p>
</div>
</div>
</n-space>
</n-modal>
</template>
<script setup lang="ts">
import { defineEmits, defineProps, ref, watch } from 'vue';
import { useMessage } from 'naive-ui';
import { ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useSettingsStore } from '@/store';
import { type Platform } from '@/types/music';
// 扩展 Platform 类型以包含 'custom'
type ExtendedPlatform = Platform | 'custom';
const props = defineProps({
show: {
type: Boolean,
default: false
},
sources: {
type: Array as () => Platform[],
type: Array as () => ExtendedPlatform[],
default: () => ['migu', 'kugou', 'pyncmd', 'bilibili']
}
});
@@ -67,17 +95,49 @@ const props = defineProps({
const emit = defineEmits(['update:show', 'update:sources']);
const { t } = useI18n();
const settingsStore = useSettingsStore();
const message = useMessage();
const visible = ref(props.show);
const selectedSources = ref<Platform[]>(props.sources);
const selectedSources = ref<ExtendedPlatform[]>(props.sources);
const musicSourceOptions = ref([
{ label: 'MG', value: 'migu' },
{ label: 'KG', value: 'kugou' },
{ label: 'pyncmd', value: 'pyncmd' },
{ label: 'Bilibili', value: 'bilibili' },
{ label: 'GD音乐台', value: 'gdmusic' }
// 将常规音源和自定义音源分开定义
const regularMusicSources = ref([
{ value: 'migu' },
{ value: 'kugou' },
{ value: 'pyncmd' },
{ value: 'bilibili' },
{ value: 'gdmusic' }
]);
const importPlugin = async () => {
try {
const result = await window.api.importCustomApiPlugin();
if (result && result.name && result.content) {
settingsStore.setCustomApiPlugin(result);
message.success(t('settings.playback.customApi.importSuccess', { name: result.name }));
// 导入成功后，如果用户还没勾选，则自动勾选上
if (!selectedSources.value.includes('custom')) {
selectedSources.value.push('custom');
}
}
} catch (error: any) {
message.error(t('settings.playback.customApi.importFailed', { message: error.message }));
}
};
// 监听自定义插件内容的变化。如果用户清除了插件，要确保 'custom' 选项被取消勾选
watch(
() => settingsStore.setData.customApiPlugin,
(newPluginContent) => {
if (!newPluginContent) {
const index = selectedSources.value.indexOf('custom');
if (index > -1) {
selectedSources.value.splice(index, 1);
}
}
}
);
// 同步外部show属性变化
watch(
() => props.show,
@@ -108,11 +168,9 @@ const handleConfirm = () => {
const defaultPlatforms = ['migu', 'kugou', 'pyncmd', 'bilibili'];
const valuesToEmit =
selectedSources.value.length > 0 ? [...new Set(selectedSources.value)] : defaultPlatforms;
emit('update:sources', valuesToEmit);
visible.value = false;
};
const handleCancel = () => {
// 取消时还原为props传入的初始值
selectedSources.value = [...props.sources];
src/renderer/layout/components/SearchBar.vue
+157 -20
View File
@@ -3,29 +3,65 @@
<div v-if="showBackButton" class="back-button" @click="goBack">
<i class="ri-arrow-left-line"></i>
</div>
<div class="search-box-input flex-1">
<n-input
v-model:value="searchValue"
size="medium"
round
:placeholder="hotSearchKeyword"
class="border dark:border-gray-600 border-gray-200"
@keydown.enter="search"
<div class="search-box-input flex-1 relative">
<n-popover
trigger="manual"
placement="bottom-start"
:show="showSuggestions"
:show-arrow="false"
style="width: 100%; margin-top: 4px"
content-style="padding: 0; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"
raw
>
<template #prefix>
<i class="iconfont icon-search"></i>
<template #trigger>
<n-input
v-model:value="searchValue"
size="medium"
round
:placeholder="hotSearchKeyword"
class="border dark:border-gray-600 border-gray-200"
@input="handleInput"
@keydown="handleKeydown"
@focus="handleFocus"
@blur="handleBlur"
>
<template #prefix>
<i class="iconfont icon-search"></i>
</template>
<template #suffix>
<n-dropdown trigger="hover" :options="searchTypeOptions" @select="selectSearchType">
<div class="w-20 px-3 flex justify-between items-center">
<div>
{{
searchTypeOptions.find((item) => item.key === searchStore.searchType)?.label
}}
</div>
<i class="iconfont icon-xiasanjiaoxing"></i>
</div>
</n-dropdown>
</template>
</n-input>
</template>
<template #suffix>
<n-dropdown trigger="hover" :options="searchTypeOptions" @select="selectSearchType">
<div class="w-20 px-3 flex justify-between items-center">
<div>
{{ searchTypeOptions.find((item) => item.key === searchStore.searchType)?.label }}
</div>
<i class="iconfont icon-xiasanjiaoxing"></i>
<!-- ==================== 搜索建议列表 ==================== -->
<div class="search-suggestions-panel">
<n-scrollbar style="max-height: 300px">
<div v-if="suggestionsLoading" class="suggestion-item loading">
<n-spin size="small" />
</div>
</n-dropdown>
</template>
</n-input>
<div
v-for="(suggestion, index) in suggestions"
:key="index"
class="suggestion-item"
:class="{ highlighted: index === highlightedIndex }"
@mousedown.prevent="selectSuggestion(suggestion)"
@mouseenter="highlightedIndex = index"
>
<i class="ri-search-line suggestion-icon"></i>
<span>{{ suggestion }}</span>
</div>
</n-scrollbar>
</div>
</n-popover>
</div>
<n-popover trigger="hover" placement="bottom" :show-arrow="false" raw>
<template #trigger>
@@ -128,12 +164,14 @@
</template>
<script lang="ts" setup>
import { useDebounceFn } from '@vueuse/core';
import { computed, onMounted, ref, watch, watchEffect } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { getSearchKeyword } from '@/api/home';
import { getUserDetail } from '@/api/login';
import { getSearchSuggestions } from '@/api/search';
import alipay from '@/assets/alipay.png';
import wechat from '@/assets/wechat.png';
import Coffee from '@/components/Coffee.vue';
@@ -250,6 +288,9 @@ const search = () => {
type: searchStore.searchType
}
});
console.log(`[UI] 执行搜索，关键词: "${searchValue.value}"`); // <--- 日志 K
showSuggestions.value = false; // 搜索后强制隐藏
};
const selectSearchType = (key: number) => {
@@ -330,6 +371,84 @@ const toGithubRelease = () => {
window.open('https://github.com/algerkong/AlgerMusicPlayer/releases', '_blank');
}
};
// ==================== 搜索建议相关的状态和方法 ====================
const suggestions = ref<string[]>([]);
const showSuggestions = ref(false);
const suggestionsLoading = ref(false);
const highlightedIndex = ref(-1); // -1 表示没有高亮项
// 使用防抖函数来避免频繁请求API
const debouncedGetSuggestions = useDebounceFn(async (keyword: string) => {
if (!keyword.trim()) {
suggestions.value = [];
showSuggestions.value = false;
return;
}
suggestionsLoading.value = true;
suggestions.value = await getSearchSuggestions(keyword);
suggestionsLoading.value = false;
// 只有当有建议时才显示面板
showSuggestions.value = suggestions.value.length > 0;
highlightedIndex.value = -1;
}, 300); // 300ms延迟
const handleInput = (value: string) => {
debouncedGetSuggestions(value);
};
const handleFocus = () => {
if (searchValue.value && suggestions.value.length > 0) {
showSuggestions.value = true;
}
};
const handleBlur = () => {
setTimeout(() => {
showSuggestions.value = false;
}, 150);
};
const selectSuggestion = (suggestion: string) => {
searchValue.value = suggestion;
showSuggestions.value = false;
search();
};
const handleKeydown = (event: KeyboardEvent) => {
// 如果建议列表不显示，则不处理上下键
if (!showSuggestions.value || suggestions.value.length === 0) {
// 如果是回车键，则正常执行搜索
if (event.key === 'Enter') {
search();
}
return;
}
switch (event.key) {
case 'ArrowDown':
event.preventDefault(); // 阻止光标移动到末尾
highlightedIndex.value = (highlightedIndex.value + 1) % suggestions.value.length;
break;
case 'ArrowUp':
event.preventDefault(); // 阻止光标移动到开头
highlightedIndex.value =
(highlightedIndex.value - 1 + suggestions.value.length) % suggestions.value.length;
break;
case 'Enter':
event.preventDefault(); // 阻止表单默认提交行为
if (highlightedIndex.value !== -1) {
// 如果有高亮项，就选择它
selectSuggestion(suggestions.value[highlightedIndex.value]);
} else {
// 否则，执行默认搜索
search();
}
break;
case 'Escape':
showSuggestions.value = false; // 按 Esc 隐藏建议
break;
}
};
// ================================================================
</script>
<style lang="scss" scoped>
@@ -437,4 +556,22 @@ const toGithubRelease = () => {
}
}
}
.search-suggestions-panel {
@apply bg-light dark:bg-dark-100 rounded-lg overflow-hidden;
.suggestion-item {
@apply flex items-center px-4 py-2 cursor-pointer;
@apply text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800;
&.highlighted {
@apply bg-gray-100 dark:bg-gray-800;
}
&.loading {
@apply justify-center;
}
.suggestion-icon {
@apply mr-2 text-gray-400;
}
}
}
</style>
src/renderer/store/modules/player.ts
+72 -27
View File
@@ -78,10 +78,14 @@ export const isBilibiliIdMatch = (id1: string | number, id2: string | number): b
// 提取公共函数：获取B站视频URL
export const getSongUrl = async (
id: string | number,
songData: SongResult,
isDownloaded: boolean = false
id: string | number,
songData: SongResult,
isDownloaded: boolean = false
) => {
const numericId = typeof id === 'string' ? parseInt(id, 10) : id;
const settingsStore = useSettingsStore();
const { message } = createDiscreteApi(['message']); // 引入 message API 用于提示
try {
if (songData.playMusicUrl) {
return songData.playMusicUrl;
@@ -92,8 +96,8 @@ export const getSongUrl = async (
if (!songData.playMusicUrl && songData.bilibiliData.bvid && songData.bilibiliData.cid) {
try {
songData.playMusicUrl = await getBilibiliAudioUrl(
songData.bilibiliData.bvid,
songData.bilibiliData.cid
songData.bilibiliData.bvid,
songData.bilibiliData.cid
);
return songData.playMusicUrl;
} catch (error) {
@@ -104,14 +108,50 @@ export const getSongUrl = async (
return songData.playMusicUrl || '';
}
const numericId = typeof id === 'string' ? parseInt(id, 10) : id;
// 检查是否有自定义音源设置
// ==================== 自定义API最优先 ====================
// 检查用户是否在全局设置中启用了 'custom' 音源
const globalSources = settingsStore.setData.enabledMusicSources || [];
const useCustomApiGlobally = globalSources.includes('custom');
// 检查歌曲是否有专属的 'custom' 音源设置
const songId = String(id);
const savedSource = localStorage.getItem(`song_source_${songId}`);
const savedSourceStr = localStorage.getItem(`song_source_${songId}`);
let useCustomApiForSong = false;
if (savedSourceStr) {
try {
const songSources = JSON.parse(savedSourceStr);
useCustomApiForSong = songSources.includes('custom');
} catch (e) {
console.error('解析歌曲音源设置失败:', e);
}
}
// 如果全局或歌曲专属设置中启用了自定义API，则最优先尝试
if ( (useCustomApiGlobally || useCustomApiForSong) && settingsStore.setData.customApiPlugin) {
console.log(`优先级 1: 尝试使用自定义API解析歌曲 ${id}...`);
try {
// 直接从 api 目录导入 parseFromCustomApi 函数
const { parseFromCustomApi } = await import('@/api/parseFromCustomApi');
const customResult = await parseFromCustomApi(numericId, cloneDeep(songData), settingsStore.setData.musicQuality || 'higher');
if (customResult && customResult.data && customResult.data.data && customResult.data.data.url) {
console.log('自定义API解析成功！');
if (isDownloaded) return customResult.data.data as any;
return customResult.data.data.url;
} else {
// 自定义API失败，给出提示，然后继续走默认流程
console.log('自定义API解析失败，将使用默认降级流程...');
message.warning(i18n.global.t('player.reparse.customApiFailed')); // 给用户一个提示
}
} catch (error) {
console.error('调用自定义API时发生错误:', error);
message.error(i18n.global.t('player.reparse.customApiError'));
}
}
// 如果自定义API失败或未启用，则执行【原有】的解析流程
// 如果有自定义音源设置，直接使用getParsingMusicUrl获取URL
if (savedSource && songData.source !== 'bilibili') {
if (savedSourceStr && songData.source !== 'bilibili') {
try {
console.log(`使用自定义音源解析歌曲 ID: ${songId}`);
const res = await getParsingMusicUrl(numericId, cloneDeep(songData));
@@ -129,28 +169,33 @@ export const getSongUrl = async (
// 正常获取URL流程
const { data } = await getMusicUrl(numericId, isDownloaded);
let url = '';
let songDetail = null;
try {
if (data.data[0].freeTrialInfo || !data.data[0].url) {
if (data && data.data && data.data[0]) {
const songDetail = data.data[0];
const hasNoUrl = !songDetail.url;
const isTrial = !!songDetail.freeTrialInfo;
if (hasNoUrl || isTrial) {
console.log(`官方URL无效 (无URL: ${hasNoUrl}, 试听: ${isTrial})，进入内置备用解析...`);
const res = await getParsingMusicUrl(numericId, cloneDeep(songData));
url = res.data.data.url;
songDetail = res.data.data;
} else {
songDetail = data.data[0] as any;
if (isDownloaded) return res?.data?.data as any;
return res?.data?.data?.url || null;
}
} catch (error) {
console.error('error', error);
url = data.data[0].url || '';
console.log('官方API解析成功！');
if (isDownloaded) return songDetail as any;
return songDetail.url;
}
if (isDownloaded) {
return songDetail;
}
url = url || data.data[0].url;
return url;
console.log('官方API返回数据结构异常，进入内置备用解析...');
const res = await getParsingMusicUrl(numericId, cloneDeep(songData));
if (isDownloaded) return res?.data?.data as any;
return res?.data?.data?.url || null;
} catch (error) {
console.error('error', error);
return null;
console.error('官方API请求失败，进入内置备用解析流程:', error);
const res = await getParsingMusicUrl(numericId, cloneDeep(songData));
if (isDownloaded) return res?.data?.data as any;
return res?.data?.data?.url || null;
}
};
src/renderer/store/modules/settings.ts
+13 -1
View File
@@ -64,6 +64,17 @@ export const useSettingsStore = defineStore('settings', () => {
// 初始化 setData
setData.value = getInitialSettings();
/**
* 保存导入的自定义API插件
* @param plugin 包含name和content的对象
*/
const setCustomApiPlugin = (plugin: { name: string; content: string }) => {
setSetData({
customApiPlugin: plugin.content,
customApiPluginName: plugin.name
});
};
const toggleTheme = () => {
if (setData.value.autoTheme) {
// 如果是自动模式，切换到手动模式并设置相反的主题
@@ -208,6 +219,7 @@ export const useSettingsStore = defineStore('settings', () => {
setLanguage,
initializeSettings,
initializeTheme,
initializeSystemFonts
initializeSystemFonts,
setCustomApiPlugin,
};
});