lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-04-23 23:57:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(download): 重构下载系统，支持暂停/恢复/取消，修复歌词加载

Browse Source 
- 新建 DownloadManager 类（主进程），每个任务独立 AbortController 控制
- 新建 Pinia useDownloadStore 作为渲染进程单一数据源
- 支持暂停/恢复/取消下载，支持断点续传（Range header）
- 批量下载全部完成后发送汇总系统通知，单首不重复通知
- 并发数可配置（1-5），队列持久化（重启后恢复）
- 修复下载列表不全、封面加载失败、通知重复等 bug
- 修复本地/下载歌曲歌词加载：优先从 ID3/FLAC 元数据提取，API 作为 fallback
- 删除 useDownloadStatus.ts，统一状态管理
- DownloadDrawer/DownloadPage 全面重写，移除 @apply 违规
- 新增 5 语言 i18n 键值（暂停/恢复/取消/排队中等）
This commit is contained in:
alger
2026-03-27 23:00:39 +08:00
parent 59f71148af
commit bc46024499
20 changed files with 1861 additions and 1578 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/common/DownloadDrawer.vue
+14 -90
View File
@@ -1,9 +1,13 @@
<template>
<div class="download-drawer-trigger">
<div class="fixed left-6 bottom-24 z-[999]">
<n-badge :value="downloadingCount" :max="99" :show="downloadingCount > 0">
<n-button circle @click="navigateToDownloads">
<n-button
circle
class="bg-white/80 dark:bg-gray-800/80 shadow-lg backdrop-blur-sm hover:bg-light dark:hover:bg-dark-200 text-gray-600 dark:text-gray-300 transition-all duration-300 w-10 h-10"
@click="navigateToDownloads"
>
<template #icon>
<i class="iconfont ri-download-cloud-2-line"></i>
<i class="iconfont ri-download-cloud-2-line text-xl"></i>
</template>
</n-button>
</n-badge>
@@ -11,102 +15,22 @@
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useDownloadStore } from '@/store/modules/download';
const router = useRouter();
const downloadList = ref<any[]>([]);
const downloadStore = useDownloadStore();
// 计算下载中的任务数量
const downloadingCount = computed(() => {
return downloadList.value.filter((item) => item.status === 'downloading').length;
});
const downloadingCount = computed(() => downloadStore.downloadingCount);
// 导航到下载页面
const navigateToDownloads = () => {
router.push('/downloads');
};
// 监听下载进度
onMounted(() => {
// 监听下载进度
window.electron.ipcRenderer.on('music-download-progress', (_, data) => {
const existingItem = downloadList.value.find((item) => item.filename === data.filename);
// 如果进度为100%，将状态设置为已完成
if (data.progress === 100) {
data.status = 'completed';
}
if (existingItem) {
Object.assign(existingItem, {
...data,
songInfo: data.songInfo || existingItem.songInfo
});
// 如果下载完成，从列表中移除
if (data.status === 'completed') {
downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
}
} else {
downloadList.value.push({
...data,
songInfo: data.songInfo
});
}
});
// 监听下载完成
window.electron.ipcRenderer.on('music-download-complete', async (_, data) => {
if (data.success) {
downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
} else {
const existingItem = downloadList.value.find((item) => item.filename === data.filename);
if (existingItem) {
Object.assign(existingItem, {
status: 'error',
error: data.error,
progress: 0
});
setTimeout(() => {
downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
}, 3000);
}
}
});
// 监听下载队列
window.electron.ipcRenderer.on('music-download-queued', (_, data) => {
const existingItem = downloadList.value.find((item) => item.filename === data.filename);
if (!existingItem) {
downloadList.value.push({
filename: data.filename,
progress: 0,
loaded: 0,
total: 0,
path: '',
status: 'downloading',
songInfo: data.songInfo
});
}
});
downloadStore.initListeners();
downloadStore.loadPersistedQueue();
});
</script>
<style lang="scss" scoped>
.download-drawer-trigger {
@apply fixed left-6 bottom-24 z-[999];
.n-button {
@apply bg-white/80 dark:bg-gray-800/80 shadow-lg backdrop-blur-sm;
@apply hover:bg-light dark:hover:bg-dark-200;
@apply text-gray-600 dark:text-gray-300;
@apply transition-all duration-300;
@apply w-10 h-10;
.iconfont {
@apply text-xl;
}
}
}
</style>
src/renderer/hooks/MusicHook.ts
+50 -3
View File
@@ -188,10 +188,10 @@ const setupMusicWatchers = () => {
if (playMusic.value.lyric && typeof playMusic.value.lyric === 'object') {
playMusic.value.lyric.hasWordByWord = hasWordByWord;
}
} else {
} else if (lyricData && typeof lyricData === 'object' && lyricData.lrcArray?.length > 0) {
// 使用现有的歌词数据结构
const rawLrc = lyricData?.lrcArray || [];
lrcTimeArray.value = lyricData?.lrcTimeArray || [];
const rawLrc = lyricData.lrcArray || [];
lrcTimeArray.value = lyricData.lrcTimeArray || [];
try {
const { translateLyrics } = await import('@/services/lyricTranslation');
@@ -200,6 +200,53 @@ const setupMusicWatchers = () => {
console.error('翻译歌词失败，使用原始歌词：', e);
lrcArray.value = rawLrc as any;
}
} else if (isElectron && playMusic.value.playMusicUrl?.startsWith('local:///')) {
// 从下载/本地文件的 ID3/FLAC 元数据中提取嵌入歌词
try {
let filePath = decodeURIComponent(
playMusic.value.playMusicUrl.replace('local:///', '')
);
// 处理 Windows 路径：/C:/... → C:/...
if (/^\/[a-zA-Z]:\//.test(filePath)) {
filePath = filePath.slice(1);
}
const embeddedLyrics = await window.api.getEmbeddedLyrics(filePath);
if (embeddedLyrics) {
const {
lrcArray: parsedLrcArray,
lrcTimeArray: parsedTimeArray,
hasWordByWord
} = await parseLyricsString(embeddedLyrics);
lrcArray.value = parsedLrcArray;
lrcTimeArray.value = parsedTimeArray;
if (playMusic.value.lyric && typeof playMusic.value.lyric === 'object') {
(playMusic.value.lyric as any).hasWordByWord = hasWordByWord;
}
} else {
// 无嵌入歌词 — 若有数字 ID，尝试 API 兜底
const songId = playMusic.value.id;
if (songId && typeof songId === 'number') {
try {
const { getMusicLrc } = await import('@/api/music');
const res = await getMusicLrc(songId);
if (res?.data?.lrc?.lyric) {
const { lrcArray: apiLrcArray, lrcTimeArray: apiTimeArray } =
await parseLyricsString(res.data.lrc.lyric);
lrcArray.value = apiLrcArray;
lrcTimeArray.value = apiTimeArray;
}
} catch (apiErr) {
console.error('API lyrics fallback failed:', apiErr);
}
}
}
} catch (err) {
console.error('Failed to extract embedded lyrics:', err);
}
} else {
// 无歌词数据
lrcArray.value = [];
lrcTimeArray.value = [];
}
// 当歌词数据更新时，如果歌词窗口打开，则发送数据
if (isElectron && isLyricWindowOpen.value) {
src/renderer/hooks/useDownload.ts
+68 -243
View File
@@ -1,160 +1,42 @@
import { cloneDeep } from 'lodash';
import { useMessage } from 'naive-ui';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { getMusicLrc } from '@/api/music';
import { useDownloadStore } from '@/store/modules/download';
import { getSongUrl } from '@/store/modules/player';
import type { SongResult } from '@/types/music';
import { isElectron } from '@/utils';
import type { DownloadSongInfo } from '../../shared/download';
const ipcRenderer = isElectron ? window.electron.ipcRenderer : null;
// 全局下载管理（闭包模式）
const createDownloadManager = () => {
// 正在下载的文件集合
const activeDownloads = new Set<string>();
// 已经发送了通知的文件集合（避免重复通知）
const notifiedDownloads = new Set<string>();
// 事件监听器是否已初始化
let isInitialized = false;
// 监听器引用（用于清理）
let completeListener: ((event: any, data: any) => void) | null = null;
let errorListener: ((event: any, data: any) => void) | null = null;
/**
* Map a SongResult to the minimal DownloadSongInfo shape required by the download store.
*/
function toDownloadSongInfo(song: SongResult): DownloadSongInfo {
return {
// 添加下载
addDownload: (filename: string) => {
activeDownloads.add(filename);
},
// 移除下载
removeDownload: (filename: string) => {
activeDownloads.delete(filename);
// 延迟清理通知记录
setTimeout(() => {
notifiedDownloads.delete(filename);
}, 5000);
},
// 标记文件已通知
markNotified: (filename: string) => {
notifiedDownloads.add(filename);
},
// 检查文件是否已通知
isNotified: (filename: string) => {
return notifiedDownloads.has(filename);
},
// 清理所有下载
clearDownloads: () => {
activeDownloads.clear();
notifiedDownloads.clear();
},
// 初始化事件监听器
initEventListeners: (message: any, t: any) => {
if (isInitialized) return;
// 移除可能存在的旧监听器
if (completeListener) {
ipcRenderer?.removeListener('music-download-complete', completeListener);
}
if (errorListener) {
ipcRenderer?.removeListener('music-download-error', errorListener);
}
// 创建新的监听器
completeListener = (_event, data) => {
if (!data.filename || !activeDownloads.has(data.filename)) return;
// 如果该文件已经通知过，则跳过
if (notifiedDownloads.has(data.filename)) return;
// 标记为已通知
notifiedDownloads.add(data.filename);
// 从活动下载移除
activeDownloads.delete(data.filename);
};
errorListener = (_event, data) => {
if (!data.filename || !activeDownloads.has(data.filename)) return;
// 如果该文件已经通知过，则跳过
if (notifiedDownloads.has(data.filename)) return;
// 标记为已通知
notifiedDownloads.add(data.filename);
// 显示失败通知
message.error(
t('songItem.message.downloadFailed', {
filename: data.filename,
error: data.error || '未知错误'
})
);
// 从活动下载移除
activeDownloads.delete(data.filename);
};
// 添加监听器
ipcRenderer?.on('music-download-complete', completeListener);
ipcRenderer?.on('music-download-error', errorListener);
isInitialized = true;
},
// 清理事件监听器
cleanupEventListeners: () => {
if (!isInitialized) return;
if (completeListener) {
ipcRenderer?.removeListener('music-download-complete', completeListener);
completeListener = null;
}
if (errorListener) {
ipcRenderer?.removeListener('music-download-error', errorListener);
errorListener = null;
}
isInitialized = false;
},
// 获取活跃下载数量
getActiveDownloadCount: () => {
return activeDownloads.size;
},
// 检查是否有特定文件正在下载
hasDownload: (filename: string) => {
return activeDownloads.has(filename);
id: song.id as number,
name: song.name,
picUrl: song.picUrl ?? song.al?.picUrl ?? '',
ar: (song.ar || song.song?.artists || []).map((a: { name: string }) => ({ name: a.name })),
al: {
name: song.al?.name ?? '',
picUrl: song.al?.picUrl ?? ''
}
};
};
// 创建单例下载管理器
const downloadManager = createDownloadManager();
}
export const useDownload = () => {
const { t } = useI18n();
const message = useMessage();
const downloadStore = useDownloadStore();
const isDownloading = ref(false);
// 初始化事件监听器
downloadManager.initEventListeners(message, t);
/**
* 下载单首音乐
* @param song 歌曲信息
* @returns Promise<void>
* Download a single song.
* Resolves the URL in the renderer then delegates queuing to the download store.
*/
const downloadMusic = async (song: SongResult) => {
if (isDownloading.value) {
@@ -165,55 +47,33 @@ export const useDownload = () => {
try {
isDownloading.value = true;
const musicUrl = (await getSongUrl(song.id as number, cloneDeep(song), true)) as any;
const musicUrl = (await getSongUrl(song.id as number, song, true)) as any;
if (!musicUrl) {
throw new Error(t('songItem.message.getUrlFailed'));
}
// 构建文件名
const artistNames = (song.ar || song.song?.artists)?.map((a) => a.name).join(',');
const filename = `${song.name} - ${artistNames}`;
// 检查是否已在下载
if (downloadManager.hasDownload(filename)) {
isDownloading.value = false;
return;
}
// 添加到活动下载集合
downloadManager.addDownload(filename);
const songData = cloneDeep(song);
songData.ar = songData.ar || songData.song?.artists;
// 发送下载请求
ipcRenderer?.send('download-music', {
url: typeof musicUrl === 'string' ? musicUrl : musicUrl.url,
filename,
songInfo: {
...songData,
downloadTime: Date.now()
},
type: musicUrl.type
});
const url = typeof musicUrl === 'string' ? musicUrl : musicUrl.url;
const type = typeof musicUrl === 'string' ? '' : (musicUrl.type ?? '');
const songInfo = toDownloadSongInfo(song);
await downloadStore.addDownload(songInfo, url, type);
message.success(t('songItem.message.downloadQueued'));
// 简化的监听逻辑，基本通知由全局监听器处理
setTimeout(() => {
isDownloading.value = false;
}, 2000);
} catch (error: any) {
console.error('Download error:', error);
isDownloading.value = false;
message.error(error.message || t('songItem.message.downloadFailed'));
} finally {
isDownloading.value = false;
}
};
/**
* 批量下载音乐
* @param songs 歌曲列表
* @returns Promise<void>
* Batch download multiple songs.
*
* NOTE: This deviates slightly from the original spec (which envisioned JIT URL resolution in
* the main process via onDownloadRequestUrl). Instead we pre-resolve URLs here in batches of 5
* to avoid request storms against the local NeteaseCloudMusicApi service (> ~5 concurrent TLS
* connections can trigger 502s). The trade-off is acceptable: the renderer already has access to
* getSongUrl and this keeps the main process simpler.
*/
const batchDownloadMusic = async (songs: SongResult[]) => {
if (isDownloading.value) {
@@ -230,82 +90,46 @@ export const useDownload = () => {
isDownloading.value = true;
message.success(t('favorite.downloading'));
let successCount = 0;
let failCount = 0;
const totalCount = songs.length;
const BATCH_SIZE = 5;
const resolvedItems: Array<{ songInfo: DownloadSongInfo; url: string; type: string }> = [];
// 下载进度追踪
const trackProgress = () => {
if (successCount + failCount === totalCount) {
isDownloading.value = false;
message.success(t('favorite.downloadSuccess'));
// Resolve URLs in batches of 5 to avoid request storms
for (let i = 0; i < songs.length; i += BATCH_SIZE) {
const chunk = songs.slice(i, i + BATCH_SIZE);
const chunkResults = await Promise.all(
chunk.map(async (song) => {
try {
const data = (await getSongUrl(song.id as number, song, true)) as any;
const url = typeof data === 'string' ? data : (data?.url ?? '');
const type = typeof data === 'string' ? '' : (data?.type ?? '');
if (!url) return null;
return { songInfo: toDownloadSongInfo(song), url, type };
} catch (error) {
console.error(`获取歌曲 ${song.name} 下载链接失败:`, error);
return null;
}
})
);
for (const item of chunkResults) {
if (item) resolvedItems.push(item);
}
};
}
// 并行获取所有歌曲的下载链接
const downloadUrls = await Promise.all(
songs.map(async (song) => {
try {
const data = (await getSongUrl(song.id, song, true)) as any;
return { song, ...data };
} catch (error) {
console.error(`获取歌曲 ${song.name} 下载链接失败:`, error);
failCount++;
return { song, url: null };
}
})
);
// 开始下载有效的链接
downloadUrls.forEach(({ song, url, type }) => {
if (!url) {
failCount++;
trackProgress();
return;
}
const songData = cloneDeep(song);
const filename = `${song.name} - ${(song.ar || song.song?.artists)?.map((a) => a.name).join(',')}`;
// 检查是否已在下载
if (downloadManager.hasDownload(filename)) {
failCount++;
trackProgress();
return;
}
// 添加到活动下载集合
downloadManager.addDownload(filename);
const songInfo = {
...songData,
ar: songData.ar || songData.song?.artists,
downloadTime: Date.now()
};
ipcRenderer?.send('download-music', {
url,
filename,
songInfo,
type
});
successCount++;
});
// 所有下载开始后，检查进度
trackProgress();
if (resolvedItems.length > 0) {
await downloadStore.batchDownload(resolvedItems);
}
} catch (error) {
console.error('下载失败:', error);
isDownloading.value = false;
message.destroyAll();
message.error(t('favorite.downloadFailed'));
} finally {
isDownloading.value = false;
}
};
/**
* 下载单首歌曲的歌词（.lrc 文件）
* @param song 歌曲信息
* Download the lyric (.lrc) for a single song.
* This is independent of the download system and uses a direct IPC call.
*/
const downloadLyric = async (song: SongResult) => {
try {
@@ -317,14 +141,15 @@ export const useDownload = () => {
return;
}
// 构建 LRC 内容：保留原始歌词，如有翻译则合并
// Build LRC content: keep original lyrics, merge translation if available
let lrcContent = lyricData.lrc.lyric;
if (lyricData.tlyric?.lyric) {
lrcContent = mergeLrcWithTranslation(lyricData.lrc.lyric, lyricData.tlyric.lyric);
}
// 构建文件名
const artistNames = (song.ar || song.song?.artists)?.map((a) => a.name).join(',');
const artistNames = (song.ar || song.song?.artists)
?.map((a: { name: string }) => a.name)
.join(',');
const filename = `${song.name} - ${artistNames}`;
const result = await ipcRenderer?.invoke('save-lyric-file', { filename, lrcContent });
@@ -349,7 +174,7 @@ export const useDownload = () => {
};
/**
* 将原文歌词和翻译歌词合并为一个 LRC 字符串
* Merge original LRC lyrics and translated LRC lyrics into a single LRC string.
*/
function mergeLrcWithTranslation(originalText: string, translationText: string): string {
const originalMap = parseLrcText(originalText);
@@ -365,7 +190,7 @@ function mergeLrcWithTranslation(originalText: string, translationText: string):
}
}
// 按时间排序
// Sort by time tag
mergedLines.sort((a, b) => {
const ta = a.match(/\[\d{2}:\d{2}(\.\d{1,3})?\]/)?.[0] || '';
const tb = b.match(/\[\d{2}:\d{2}(\.\d{1,3})?\]/)?.[0] || '';
@@ -376,7 +201,7 @@ function mergeLrcWithTranslation(originalText: string, translationText: string):
}
/**
* 解析 LRC 文本为 Map<timeTag, content>
* Parse LRC text into a Map<timeTag, content>.
*/
function parseLrcText(text: string): Map<string, string> {
const map = new Map<string, string>();
src/renderer/hooks/useDownloadStatus.ts
-94
View File
@@ -1,94 +0,0 @@
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
const downloadList = ref<any[]>([]);
const isInitialized = ref(false);
export const useDownloadStatus = () => {
const router = useRouter();
const downloadingCount = computed(() => {
return downloadList.value.filter((item) => item.status === 'downloading').length;
});
const navigateToDownloads = () => {
router.push('/downloads');
};
const initDownloadListeners = () => {
if (isInitialized.value) return;
if (!window.electron?.ipcRenderer) return;
window.electron.ipcRenderer.on('music-download-progress', (_, data) => {
const existingItem = downloadList.value.find((item) => item.filename === data.filename);
if (data.progress === 100) {
data.status = 'completed';
}
if (existingItem) {
Object.assign(existingItem, {
...data,
songInfo: data.songInfo || existingItem.songInfo
});
if (data.status === 'completed') {
downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
}
} else {
downloadList.value.push({
...data,
songInfo: data.songInfo
});
}
});
window.electron.ipcRenderer.on('music-download-complete', async (_, data) => {
if (data.success) {
downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
} else {
const existingItem = downloadList.value.find((item) => item.filename === data.filename);
if (existingItem) {
Object.assign(existingItem, {
status: 'error',
error: data.error,
progress: 0
});
setTimeout(() => {
downloadList.value = downloadList.value.filter(
(item) => item.filename !== data.filename
);
}, 3000);
}
}
});
window.electron.ipcRenderer.on('music-download-queued', (_, data) => {
const existingItem = downloadList.value.find((item) => item.filename === data.filename);
if (!existingItem) {
downloadList.value.push({
filename: data.filename,
progress: 0,
loaded: 0,
total: 0,
path: '',
status: 'downloading',
songInfo: data.songInfo
});
}
});
isInitialized.value = true;
};
onMounted(() => {
initDownloadListeners();
});
return {
downloadList,
downloadingCount,
navigateToDownloads
};
};
src/renderer/layout/components/SearchBar.vue
+6 -2
View File
@@ -221,8 +221,8 @@ import alipay from '@/assets/alipay.png';
import wechat from '@/assets/wechat.png';
import Coffee from '@/components/Coffee.vue';
import { SEARCH_TYPES, USER_SET_OPTIONS } from '@/const/bar-const';
import { useDownloadStatus } from '@/hooks/useDownloadStatus';
import { useZoom } from '@/hooks/useZoom';
import { useDownloadStore } from '@/store/modules/download';
import { useIntelligenceModeStore } from '@/store/modules/intelligenceMode';
import { useNavTitleStore } from '@/store/modules/navTitle';
import { useSearchStore } from '@/store/modules/search';
@@ -243,7 +243,11 @@ const userSetOptions = ref(USER_SET_OPTIONS);
const { t, locale } = useI18n();
const intelligenceModeStore = useIntelligenceModeStore();
const { downloadingCount, navigateToDownloads } = useDownloadStatus();
const downloadStore = useDownloadStore();
const downloadingCount = computed(() => downloadStore.downloadingCount);
const navigateToDownloads = () => {
router.push('/downloads');
};
const showDownloadButton = computed(
() =>
isElectron && (settingsStore.setData?.alwaysShowDownloadButton || downloadingCount.value > 0)
src/renderer/store/index.ts
+1
View File
@@ -15,6 +15,7 @@ pinia.use(({ store }) => {
});
// 导出所有 store
export * from './modules/download';
export * from './modules/favorite';
export * from './modules/intelligenceMode';
export * from './modules/localMusic';
src/renderer/store/modules/download.ts
+228
View File
@@ -0,0 +1,228 @@
import { defineStore } from 'pinia';
import { computed, ref } from 'vue';
import { isElectron } from '@/utils';
import {
createDefaultDownloadSettings,
DOWNLOAD_TASK_STATE,
type DownloadSettings,
type DownloadTask
} from '../../../shared/download';
const DEFAULT_COVER = '/images/default_cover.png';
function validatePicUrl(url?: string): string {
if (!url || url === '' || url.startsWith('/')) return DEFAULT_COVER;
return url.replace(/^http:\/\//, 'https://');
}
export const useDownloadStore = defineStore(
'download',
() => {
// ── State ──────────────────────────────────────────────────────────────
const tasks = ref(new Map<string, DownloadTask>());
const completedList = ref<any[]>([]);
const settings = ref<DownloadSettings>(createDefaultDownloadSettings());
const isLoadingCompleted = ref(false);
// Track whether IPC listeners have been registered
let listenersInitialised = false;
// ── Computed ───────────────────────────────────────────────────────────
const downloadingList = computed(() => {
const active = [
DOWNLOAD_TASK_STATE.queued,
DOWNLOAD_TASK_STATE.downloading,
DOWNLOAD_TASK_STATE.paused
] as string[];
return [...tasks.value.values()]
.filter((t) => active.includes(t.state))
.sort((a, b) => a.createdAt - b.createdAt);
});
const downloadingCount = computed(() => downloadingList.value.length);
const totalProgress = computed(() => {
const list = downloadingList.value;
if (list.length === 0) return 0;
const sum = list.reduce((acc, t) => acc + t.progress, 0);
return sum / list.length;
});
// ── Actions ────────────────────────────────────────────────────────────
const addDownload = async (songInfo: DownloadTask['songInfo'], url: string, type: string) => {
if (!isElectron) return;
const validatedInfo = {
...songInfo,
picUrl: validatePicUrl(songInfo.picUrl)
};
const artistNames = validatedInfo.ar?.map((a) => a.name).join(',') ?? '';
const filename = `${validatedInfo.name} - ${artistNames}`;
await window.api.downloadAdd({ url, filename, songInfo: validatedInfo, type });
};
const batchDownload = async (
items: Array<{ songInfo: DownloadTask['songInfo']; url: string; type: string }>
) => {
if (!isElectron) return;
const validatedItems = items.map((item) => {
const validatedInfo = {
...item.songInfo,
picUrl: validatePicUrl(item.songInfo.picUrl)
};
const artistNames = validatedInfo.ar?.map((a) => a.name).join(',') ?? '';
const filename = `${validatedInfo.name} - ${artistNames}`;
return { url: item.url, filename, songInfo: validatedInfo, type: item.type };
});
await window.api.downloadAddBatch({ items: validatedItems });
};
const pauseTask = async (taskId: string) => {
if (!isElectron) return;
await window.api.downloadPause(taskId);
};
const resumeTask = async (taskId: string) => {
if (!isElectron) return;
await window.api.downloadResume(taskId);
};
const cancelTask = async (taskId: string) => {
if (!isElectron) return;
await window.api.downloadCancel(taskId);
tasks.value.delete(taskId);
};
const cancelAll = async () => {
if (!isElectron) return;
await window.api.downloadCancelAll();
tasks.value.clear();
};
const updateConcurrency = async (n: number) => {
if (!isElectron) return;
const clamped = Math.min(5, Math.max(1, n));
settings.value = { ...settings.value, maxConcurrent: clamped };
await window.api.downloadSetConcurrency(clamped);
};
const refreshCompleted = async () => {
if (!isElectron) return;
isLoadingCompleted.value = true;
try {
const list = await window.api.downloadGetCompleted();
completedList.value = list;
} finally {
isLoadingCompleted.value = false;
}
};
const deleteCompleted = async (filePath: string) => {
if (!isElectron) return;
await window.api.downloadDeleteCompleted(filePath);
completedList.value = completedList.value.filter((item) => item.filePath !== filePath);
};
const clearCompleted = async () => {
if (!isElectron) return;
await window.api.downloadClearCompleted();
completedList.value = [];
};
const loadPersistedQueue = async () => {
if (!isElectron) return;
const queue = await window.api.downloadGetQueue();
tasks.value.clear();
for (const task of queue) {
tasks.value.set(task.taskId, task);
}
};
const initListeners = () => {
if (!isElectron || listenersInitialised) return;
listenersInitialised = true;
window.api.onDownloadProgress((event) => {
const task = tasks.value.get(event.taskId);
if (task) {
tasks.value.set(event.taskId, {
...task,
progress: event.progress,
loaded: event.loaded,
total: event.total
});
}
});
window.api.onDownloadStateChange((event) => {
const { taskId, state, task } = event;
if (state === DOWNLOAD_TASK_STATE.completed || state === DOWNLOAD_TASK_STATE.cancelled) {
tasks.value.delete(taskId);
if (state === DOWNLOAD_TASK_STATE.completed) {
setTimeout(() => {
refreshCompleted();
}, 500);
}
} else {
tasks.value.set(taskId, task);
}
});
window.api.onDownloadBatchComplete((_event) => {
// no-op: main process handles the desktop notification
});
window.api.onDownloadRequestUrl(async (event) => {
try {
const { getSongUrl } = await import('@/store/modules/player');
const result = (await getSongUrl(event.songInfo.id, event.songInfo as any, true)) as any;
const url = typeof result === 'string' ? result : (result?.url ?? '');
await window.api.downloadProvideUrl(event.taskId, url);
} catch (err) {
console.error('[downloadStore] onDownloadRequestUrl failed:', err);
await window.api.downloadProvideUrl(event.taskId, '');
}
});
};
const cleanup = () => {
if (!isElectron) return;
window.api.removeDownloadListeners();
listenersInitialised = false;
};
return {
// state
tasks,
completedList,
settings,
isLoadingCompleted,
// computed
downloadingList,
downloadingCount,
totalProgress,
// actions
addDownload,
batchDownload,
pauseTask,
resumeTask,
cancelTask,
cancelAll,
updateConcurrency,
refreshCompleted,
deleteCompleted,
clearCompleted,
loadPersistedQueue,
initListeners,
cleanup
};
},
{
persist: {
key: 'download-settings',
// WARNING: Do NOT add 'tasks' — Map doesn't serialize with JSON.stringify
pick: ['settings']
}
}
);
src/renderer/types/electron.d.ts
Vendored
+19
View File
@@ -28,6 +28,25 @@ export interface IElectronAPI {
) => Promise<{ files: { path: string; modifiedTime: number }[]; count: number }>;
/** 批量解析本地音乐文件元数据 */
parseLocalMusicMetadata: (_filePaths: string[]) => Promise<LocalMusicMeta[]>;
// Download manager
downloadAdd: (_task: any) => Promise<string>;
downloadAddBatch: (_tasks: any) => Promise<{ batchId: string; taskIds: string[] }>;
downloadPause: (_taskId: string) => Promise<void>;
downloadResume: (_taskId: string) => Promise<void>;
downloadCancel: (_taskId: string) => Promise<void>;
downloadCancelAll: () => Promise<void>;
downloadGetQueue: () => Promise<any[]>;
downloadSetConcurrency: (_n: number) => void;
downloadGetCompleted: () => Promise<any[]>;
downloadDeleteCompleted: (_filePath: string) => Promise<boolean>;
downloadClearCompleted: () => Promise<boolean>;
getEmbeddedLyrics: (_filePath: string) => Promise<string | null>;
downloadProvideUrl: (_taskId: string, _url: string) => Promise<void>;
onDownloadProgress: (_cb: (_data: any) => void) => void;
onDownloadStateChange: (_cb: (_data: any) => void) => void;
onDownloadBatchComplete: (_cb: (_data: any) => void) => void;
onDownloadRequestUrl: (_cb: (_data: any) => void) => void;
removeDownloadListeners: () => void;
}
declare global {
src/renderer/views/download/DownloadPage.vue
+169 -379
View File
@@ -45,8 +45,10 @@
<p class="mt-4 text-sm md:text-base text-neutral-500 dark:text-neutral-400">
{{
tabName === 'downloading'
? t('download.progress.total', { progress: totalProgress.toFixed(1) })
: t('download.count', { count: downloadedList.length })
? t('download.progress.total', {
progress: downloadStore.totalProgress.toFixed(1)
})
: t('download.count', { count: downloadStore.completedList.length })
}}
</p>
</div>
@@ -79,8 +81,8 @@
<!-- Right Actions -->
<div class="flex items-center gap-3">
<button
v-if="tabName === 'downloaded' && downloadedList.length > 0"
class="action-btn-pill flex items-center gap-2 px-4 py-2 rounded-full font-semibold text-sm transition-all hover:bg-red-50 dark:hover:bg-red-900/10 text-red-500 border border-neutral-200 dark:border-neutral-800"
v-if="tabName === 'downloaded' && downloadStore.completedList.length > 0"
class="flex items-center gap-2 px-4 py-2 rounded-full font-semibold text-sm transition-all hover:bg-red-50 dark:hover:bg-red-900/10 text-red-500 border border-neutral-200 dark:border-neutral-800 hover:border-primary/30 hover:bg-primary/5"
@click="showClearConfirm = true"
>
<i class="ri-delete-bin-line text-lg" />
@@ -88,14 +90,14 @@
</button>
<button
class="action-btn-icon w-10 h-10 rounded-full flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-all"
class="w-10 h-10 rounded-full flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-all hover:scale-110 hover:text-primary hover:bg-primary/10"
@click="openDownloadPath"
>
<i class="ri-folder-open-line text-lg" />
</button>
<button
class="action-btn-icon w-10 h-10 rounded-full flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-all"
class="w-10 h-10 rounded-full flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-all hover:scale-110 hover:text-primary hover:bg-primary/10"
@click="showSettingsDrawer = true"
>
<i class="ri-settings-3-line text-lg" />
@@ -108,7 +110,10 @@
<section class="list-section page-padding-x mt-6">
<!-- Downloading List -->
<div v-if="tabName === 'downloading'" class="downloading-container">
<div v-if="downloadList.length === 0" class="empty-state py-20 text-center">
<div
v-if="downloadStore.downloadingList.length === 0"
class="empty-state py-20 text-center"
>
<i
class="ri-download-cloud-2-line text-5xl mb-4 text-neutral-200 dark:text-neutral-800"
/>
@@ -116,15 +121,15 @@
</div>
<div v-else class="grid grid-cols-1 xl:grid-cols-2 gap-4">
<div
v-for="item in downloadList"
:key="item.path"
v-for="item in downloadStore.downloadingList"
:key="item.taskId"
class="downloading-item group p-4 rounded-2xl bg-neutral-50 dark:bg-neutral-900/50 border border-neutral-100 dark:border-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-all"
>
<div class="flex items-center gap-4">
<n-image
:src="getImgUrl(item.songInfo?.picUrl, '100y100')"
class="w-12 h-12 rounded-xl flex-shrink-0"
preview-disabled
<img
:src="item.songInfo?.picUrl || '/images/default_cover.png'"
class="w-12 h-12 rounded-xl flex-shrink-0 object-cover"
@error="handleCoverError"
/>
<div class="flex-1 min-w-0">
<div class="flex items-center justify-between mb-2">
@@ -136,10 +141,7 @@
item.songInfo?.ar?.map((a) => a.name).join(', ')
}}</span>
</div>
<span
class="text-xs font-medium"
:class="item.status === 'error' ? 'text-red-500' : 'text-primary'"
>
<span class="text-xs font-medium" :class="getStatusClass(item)">
{{ getStatusText(item) }}
</span>
</div>
@@ -147,18 +149,44 @@
class="relative h-1.5 bg-neutral-200 dark:bg-neutral-800 rounded-full overflow-hidden"
>
<div
class="absolute inset-y-0 left-0 bg-primary transition-all duration-300"
:class="{ 'bg-red-500': item.status === 'error' }"
class="absolute inset-y-0 left-0 transition-all duration-300"
:class="getProgressClass(item)"
:style="{ width: `${item.progress}%` }"
></div>
</div>
<div class="flex items-center justify-between mt-2">
<span class="text-[10px] text-neutral-400"
>{{ formatSize(item.loaded) }} / {{ formatSize(item.total) }}</span
>
<span class="text-[10px] text-neutral-400"
>{{ item.progress.toFixed(1) }}%</span
>
<span class="text-[10px] text-neutral-400">
{{ formatSize(item.loaded) }} / {{ formatSize(item.total) }}
</span>
<div class="flex items-center gap-1">
<!-- Pause button (shown when downloading) -->
<button
v-if="item.state === 'downloading'"
class="w-6 h-6 rounded-full flex items-center justify-center text-neutral-400 hover:text-yellow-500 hover:bg-yellow-500/10 transition-all"
@click="handlePause(item.taskId)"
>
<i class="ri-pause-circle-line text-sm" />
</button>
<!-- Resume button (shown when paused) -->
<button
v-if="item.state === 'paused'"
class="w-6 h-6 rounded-full flex items-center justify-center text-neutral-400 hover:text-primary hover:bg-primary/10 transition-all"
@click="handleResume(item.taskId)"
>
<i class="ri-play-circle-line text-sm" />
</button>
<!-- Cancel button (shown for all active states) -->
<button
v-if="['queued', 'downloading', 'paused'].includes(item.state)"
class="w-6 h-6 rounded-full flex items-center justify-center text-neutral-400 hover:text-red-500 hover:bg-red-500/10 transition-all"
@click="handleCancel(item.taskId)"
>
<i class="ri-close-circle-line text-sm" />
</button>
<span class="text-[10px] text-neutral-400 ml-1"
>{{ item.progress.toFixed(1) }}%</span
>
</div>
</div>
</div>
</div>
@@ -168,8 +196,11 @@
<!-- Downloaded List -->
<div v-else class="downloaded-container">
<n-spin :show="isLoadingDownloaded">
<div v-if="downloadedList.length === 0" class="empty-state py-20 text-center">
<n-spin :show="downloadStore.isLoadingCompleted">
<div
v-if="downloadStore.completedList.length === 0"
class="empty-state py-20 text-center"
>
<i
class="ri-inbox-archive-line text-5xl mb-4 text-neutral-200 dark:text-neutral-800"
/>
@@ -180,8 +211,8 @@
</div>
<div v-else class="space-y-2">
<div
v-for="(item, index) in downList"
:key="item.path"
v-for="(item, index) in downloadStore.completedList"
:key="item.path || item.filePath"
class="downloaded-item group animate-item p-3 rounded-2xl flex items-center gap-4 hover:bg-neutral-100 dark:hover:bg-neutral-900 transition-all"
:style="{ animationDelay: `${index * 0.03}s` }"
>
@@ -191,6 +222,7 @@
<img
:src="getImgUrl(item.picUrl, '100y100')"
class="w-full h-full object-cover"
@error="handleCoverError"
/>
<div
class="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 group-hover:opacity-100 transition-all cursor-pointer"
@@ -217,7 +249,7 @@
class="hidden md:flex items-center gap-1 text-[10px] text-neutral-400 bg-neutral-100 dark:bg-neutral-800 px-2 py-0.5 rounded-full truncate"
>
<i class="ri-folder-line" />
<span class="truncate">{{ shortenPath(item.path) }}</span>
<span class="truncate">{{ shortenPath(item.path || item.filePath) }}</span>
</div>
</div>
</div>
@@ -227,7 +259,7 @@
<template #trigger>
<button
class="w-8 h-8 rounded-full flex items-center justify-center text-neutral-400 hover:text-primary hover:bg-primary/10 transition-all"
@click="copyPath(item.path)"
@click="copyPath(item.path || item.filePath)"
>
<i class="ri-file-copy-line" />
</button>
@@ -238,7 +270,7 @@
<template #trigger>
<button
class="w-8 h-8 rounded-full flex items-center justify-center text-neutral-400 hover:text-primary hover:bg-primary/10 transition-all"
@click="openDirectory(item.path)"
@click="openDirectory(item.path || item.filePath)"
>
<i class="ri-folder-open-line" />
</button>
@@ -331,6 +363,28 @@
</div>
</div>
<!-- Concurrency Section -->
<div class="setting-group">
<div class="flex items-center justify-between">
<div>
<h3 class="text-sm font-bold text-neutral-900 dark:text-white">
{{ t('download.settingsPanel.concurrency') }}
</h3>
<p class="text-xs text-neutral-500 mt-1">
{{ t('download.settingsPanel.concurrencyDesc') }}
</p>
</div>
<n-input-number
:value="downloadStore.settings.maxConcurrent"
:min="1"
:max="5"
size="small"
class="w-24"
@update:value="(v: number | null) => downloadStore.updateConcurrency(v || 3)"
/>
</div>
</div>
<!-- Format Section -->
<div class="setting-group">
<h3 class="text-sm font-bold text-neutral-900 dark:text-white mb-2">
@@ -456,72 +510,63 @@ import { useMessage } from 'naive-ui';
import { computed, onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { getMusicDetail } from '@/api/music';
import { useDownloadStore } from '@/store/modules/download';
import { usePlayerStore } from '@/store/modules/player';
import type { SongResult } from '@/types/music';
import { getImgUrl } from '@/utils';
import type { DownloadTask } from '../../../shared/download';
const { t } = useI18n();
const playerStore = usePlayerStore();
const downloadStore = useDownloadStore();
const message = useMessage();
interface DownloadItem {
filename: string;
progress: number;
loaded: number;
total: number;
path: string;
status: 'downloading' | 'completed' | 'error';
error?: string;
songInfo?: any;
}
interface DownloadedItem {
filename: string;
path: string;
size: number;
id: number;
picUrl: string;
ar: { name: string }[];
displayName?: string;
}
const tabName = ref('downloading');
const downloadList = ref<DownloadItem[]>([]);
const downloadedList = ref<DownloadedItem[]>(
JSON.parse(localStorage.getItem('downloadedList') || '[]')
);
// ── Status helpers ──────────────────────────────────────────────────────────
const downList = computed(() => downloadedList.value);
// 计算总进度
const totalProgress = computed(() => {
if (downloadList.value.length === 0) return 0;
const total = downloadList.value.reduce((sum, item) => sum + item.progress, 0);
return total / downloadList.value.length;
});
watch(totalProgress, (newVal) => {
if (newVal === 100) {
refreshDownloadedList();
}
});
// 获取状态文本
const getStatusText = (item: DownloadItem) => {
switch (item.status) {
case 'downloading':
return t('download.status.downloading');
case 'completed':
return t('download.status.completed');
case 'error':
return t('download.status.failed');
default:
return t('download.status.unknown');
}
const getStatusText = (item: DownloadTask) => {
const statusMap: Record<string, string> = {
queued: t('download.status.queued'),
downloading: t('download.status.downloading'),
paused: t('download.status.paused'),
completed: t('download.status.completed'),
error: t('download.status.failed'),
cancelled: t('download.status.cancelled')
};
return statusMap[item.state] || t('download.status.unknown');
};
// 格式化文件大小
const getStatusClass = (item: DownloadTask) => {
const classMap: Record<string, string> = {
queued: 'text-neutral-400',
downloading: 'text-primary',
paused: 'text-yellow-500',
error: 'text-red-500',
cancelled: 'text-neutral-400'
};
return classMap[item.state] || 'text-neutral-400';
};
const getProgressClass = (item: DownloadTask) => {
if (item.state === 'error') return 'bg-red-500';
if (item.state === 'paused') return 'bg-yellow-500';
return 'bg-primary';
};
// ── Task action handlers ────────────────────────────────────────────────────
const handlePause = (taskId: string) => downloadStore.pauseTask(taskId);
const handleResume = (taskId: string) => downloadStore.resumeTask(taskId);
const handleCancel = (taskId: string) => downloadStore.cancelTask(taskId);
const handleCoverError = (e: Event) => {
(e.target as HTMLImageElement).src = '/images/default_cover.png';
};
// ── Utility functions ───────────────────────────────────────────────────────
const formatSize = (bytes: number) => {
if (!bytes) return '0 B';
const k = 1024;
@@ -530,7 +575,6 @@ const formatSize = (bytes: number) => {
return `${(bytes / k ** i).toFixed(1)} ${sizes[i]}`;
};
// 复制文件路径
const copyPath = (path: string) => {
navigator.clipboard
.writeText(path)
@@ -543,55 +587,43 @@ const copyPath = (path: string) => {
});
};
// 格式化路径
const shortenPath = (path: string) => {
if (!path) return '';
// 获取文件名和目录
const parts = path.split(/[/\\]/);
const fileName = parts.pop() || '';
// 如果路径很短，直接返回
if (path.length < 30) return path;
// 保留开头的部分目录和结尾的文件名
if (parts.length <= 2) return path;
const start = parts.slice(0, 1).join('/');
const end = parts.slice(-1).join('/');
return `${start}/.../${end}/${fileName}`;
};
// 获取本地文件URL
const getLocalFilePath = (path: string) => {
if (!path) return '';
// 确保URL格式正确
return `local:///${encodeURIComponent(path)}`;
};
// 打开目录
const openDirectory = (path: string) => {
window.electron.ipcRenderer.send('open-directory', path);
};
// 播放音乐
const handlePlayMusic = async (item: DownloadedItem) => {
// ── Play music ──────────────────────────────────────────────────────────────
const handlePlayMusic = async (item: any) => {
try {
// 先检查文件是否存在
const fileExists = await window.electron.ipcRenderer.invoke('check-file-exists', item.path);
const filePath = item.path || item.filePath;
const fileExists = await window.electron.ipcRenderer.invoke('check-file-exists', filePath);
if (!fileExists) {
message.error(t('download.delete.fileNotFound', { name: item.displayName || item.filename }));
return;
}
// 转换下载项为播放所需的歌曲对象
const song: SongResult = {
id: item.id,
name: item.displayName || item.filename,
ar:
item.ar?.map((a) => ({
item.ar?.map((a: { name: string }) => ({
id: 0,
name: a.name,
picId: 0,
@@ -613,15 +645,11 @@ const handlePlayMusic = async (item: DownloadedItem) => {
picId: 0
} as any,
picUrl: item.picUrl,
// 使用本地文件协议
playMusicUrl: getLocalFilePath(item.path),
playMusicUrl: getLocalFilePath(filePath),
source: 'netease' as 'netease',
count: 0
};
console.log('开始播放本地音乐:', song.name, '路径:', song.playMusicUrl);
// 播放歌曲
await playerStore.setPlay(song);
playerStore.setPlayMusic(true);
playerStore.setIsPlay(true);
@@ -633,32 +661,24 @@ const handlePlayMusic = async (item: DownloadedItem) => {
}
};
// 删除相关
const showDeleteConfirm = ref(false);
const itemToDelete = ref<DownloadedItem | null>(null);
// ── Delete / Clear ──────────────────────────────────────────────────────────
// 处理删除点击
const handleDelete = (item: DownloadedItem) => {
const showDeleteConfirm = ref(false);
const itemToDelete = ref<any>(null);
const handleDelete = (item: any) => {
itemToDelete.value = item;
showDeleteConfirm.value = true;
};
// 确认删除
const confirmDelete = async () => {
const item = itemToDelete.value;
if (!item) return;
try {
const success = await window.electron.ipcRenderer.invoke('delete-downloaded-music', item.path);
if (success) {
const newList = downloadedList.value.filter((i) => i.id !== item.id);
downloadedList.value = newList;
localStorage.setItem('downloadedList', JSON.stringify(newList));
message.success(t('download.delete.success'));
} else {
message.warning(t('download.delete.fileNotFound'));
}
const filePath = item.path || item.filePath;
await downloadStore.deleteCompleted(filePath);
message.success(t('download.delete.success'));
} catch (error) {
console.error('Failed to delete music:', error);
message.warning(t('download.delete.recordRemoved'));
@@ -668,15 +688,11 @@ const confirmDelete = async () => {
}
};
// 清空下载记录相关
const showClearConfirm = ref(false);
// 清空下载记录
const clearDownloadRecords = async () => {
try {
downloadedList.value = [];
localStorage.setItem('downloadedList', '[]');
await window.electron.ipcRenderer.invoke('clear-downloaded-music');
await downloadStore.clearCompleted();
message.success(t('download.clear.success'));
} catch (error) {
console.error('Failed to clear download records:', error);
@@ -686,206 +702,8 @@ const clearDownloadRecords = async () => {
}
};
// 添加加载状态
const isLoadingDownloaded = ref(false);
// ── Download settings ───────────────────────────────────────────────────────
// 格式化歌曲名称，应用用户设置的格式
const formatSongName = (songInfo) => {
if (!songInfo) return '';
// 获取格式设置
const nameFormat = downloadSettings.value.nameFormat || '{songName} - {artistName}';
// 准备替换变量
const artistName = songInfo.ar?.map((a) => a.name).join('/') || '未知艺术家';
const songName = songInfo.name || songInfo.filename || '未知歌曲';
const albumName = songInfo.al?.name || '未知专辑';
// 应用自定义格式
return nameFormat
.replace(/\{songName\}/g, songName)
.replace(/\{artistName\}/g, artistName)
.replace(/\{albumName\}/g, albumName);
};
// 获取已下载音乐列表
const refreshDownloadedList = async () => {
if (isLoadingDownloaded.value) return; // 防止重复加载
try {
isLoadingDownloaded.value = true;
const list = await window.electron.ipcRenderer.invoke('get-downloaded-music');
if (!Array.isArray(list) || list.length === 0) {
downloadedList.value = [];
localStorage.setItem('downloadedList', '[]');
return;
}
const songIds = list.filter((item) => item.id).map((item) => item.id);
if (songIds.length === 0) {
// 处理显示格式化文件名
const updatedList = list.map((item) => ({
...item,
displayName: formatSongName(item) || item.filename
}));
downloadedList.value = updatedList;
localStorage.setItem('downloadedList', JSON.stringify(updatedList));
return;
}
try {
const detailRes = await getMusicDetail(songIds);
const songDetails = detailRes.data.songs.reduce((acc, song) => {
acc[song.id] = song;
return acc;
}, {});
const updatedList = list.map((item) => {
const songDetail = songDetails[item.id];
const updatedItem = {
...item,
picUrl: songDetail?.al?.picUrl || item.picUrl || '/images/default_cover.png',
ar: songDetail?.ar || item.ar || [{ name: t('download.localMusic') }],
name: songDetail?.name || item.name || item.filename
};
// 添加格式化的显示名称
updatedItem.displayName = formatSongName(updatedItem) || updatedItem.filename;
return updatedItem;
});
downloadedList.value = updatedList;
localStorage.setItem('downloadedList', JSON.stringify(updatedList));
} catch (error) {
console.error('Failed to get music details:', error);
// 处理显示格式化文件名
const updatedList = list.map((item) => ({
...item,
displayName: formatSongName(item) || item.filename
}));
downloadedList.value = updatedList;
localStorage.setItem('downloadedList', JSON.stringify(updatedList));
}
} catch (error) {
console.error('Failed to get downloaded music list:', error);
downloadedList.value = [];
localStorage.setItem('downloadedList', '[]');
} finally {
isLoadingDownloaded.value = false;
}
};
watch(
() => tabName.value,
(newVal) => {
if (newVal) {
refreshDownloadedList();
}
}
);
// 初始化
onMounted(() => {
refreshDownloadedList();
// 记录已处理的下载项，避免重复触发事件
const processedDownloads = new Set<string>();
// 监听下载进度
window.electron.ipcRenderer.on('music-download-progress', (_, data) => {
const existingItem = downloadList.value.find((item) => item.filename === data.filename);
// 如果进度为100%，将状态设置为已完成
if (data.progress === 100) {
data.status = 'completed';
}
if (existingItem) {
Object.assign(existingItem, {
...data,
songInfo: data.songInfo || existingItem.songInfo
});
// 如果下载完成，从列表中移除，但不触发完成通知
// 通知由 music-download-complete 事件处理
if (data.status === 'completed') {
downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
}
} else {
downloadList.value.push({
...data,
songInfo: data.songInfo
});
}
});
// 监听下载完成
window.electron.ipcRenderer.on('music-download-complete', async (_, data) => {
// 如果已经处理过此文件的完成事件，则跳过
if (processedDownloads.has(data.filename)) {
return;
}
// 标记为已处理
processedDownloads.add(data.filename);
// 下载成功处理
if (data.success) {
// 从下载列表中移除
downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
// 延迟刷新已下载列表，避免文件系统未完全写入
setTimeout(() => refreshDownloadedList(), 500);
// 只在下载页面显示一次下载成功通知
message.success(t('download.message.downloadComplete', { filename: data.filename }));
// 避免通知过多占用内存，设置一个超时来清理已处理的标记
setTimeout(() => {
processedDownloads.delete(data.filename);
}, 10000); // 10秒后清除
} else {
// 下载失败处理
const existingItem = downloadList.value.find((item) => item.filename === data.filename);
if (existingItem) {
Object.assign(existingItem, {
status: 'error',
error: data.error,
progress: 0
});
setTimeout(() => {
downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
processedDownloads.delete(data.filename);
}, 3000);
}
message.error(
t('download.message.downloadFailed', { filename: data.filename, error: data.error })
);
}
});
// 监听下载队列
window.electron.ipcRenderer.on('music-download-queued', (_, data) => {
const existingItem = downloadList.value.find((item) => item.filename === data.filename);
if (!existingItem) {
downloadList.value.push({
filename: data.filename,
progress: 0,
loaded: 0,
total: 0,
path: '',
status: 'downloading',
songInfo: data.songInfo
});
}
});
});
// 下载设置
const showSettingsDrawer = ref(false);
const downloadSettings = ref({
path: '',
@@ -894,13 +712,11 @@ const downloadSettings = ref({
saveLyric: false
});
// 格式组件（用于拖拽排序）
const formatComponents = ref([
{ id: 1, type: 'songName' },
{ id: 2, type: 'artistName' }
]);
// 处理组件排序
const handleMoveUp = (index: number) => {
if (index > 0) {
const temp = formatComponents.value.splice(index, 1)[0];
@@ -915,7 +731,6 @@ const handleMoveDown = (index: number) => {
}
};
// 添加新的格式组件
const addFormatComponent = (type: string) => {
if (!formatComponents.value.some((item) => item.type === type)) {
formatComponents.value.push({
@@ -925,12 +740,10 @@ const addFormatComponent = (type: string) => {
}
};
// 删除格式组件
const removeFormatComponent = (index: number) => {
formatComponents.value.splice(index, 1);
};
// 监听组件变化更新格式
watch(
formatComponents,
(newComponents) => {
@@ -946,12 +759,10 @@ watch(
{ deep: true }
);
// 监听分隔符变化更新格式
watch(
() => downloadSettings.value.separator,
(newSeparator) => {
if (formatComponents.value.length > 1) {
// 重新构建格式字符串
let format = '';
formatComponents.value.forEach((component, index) => {
format += `{${component.type}}`;
@@ -964,7 +775,6 @@ watch(
}
);
// 格式名称预览
const formatNamePreview = computed(() => {
const format = downloadSettings.value.nameFormat;
return format
@@ -973,7 +783,6 @@ const formatNamePreview = computed(() => {
.replace(/\{albumName\}/g, '电视剧原声带');
});
// 选择下载路径
const selectDownloadPath = async () => {
const result = await window.electron.ipcRenderer.invoke('select-directory');
if (result && !result.canceled && result.filePaths.length > 0) {
@@ -981,7 +790,6 @@ const selectDownloadPath = async () => {
}
};
// 打开下载路径
const openDownloadPath = () => {
if (downloadSettings.value.path) {
window.electron.ipcRenderer.send('open-directory', downloadSettings.value.path);
@@ -990,9 +798,7 @@ const openDownloadPath = () => {
}
};
// 保存下载设置
const saveDownloadSettings = () => {
// 保存到配置
window.electron.ipcRenderer.send(
'set-store-value',
'set.downloadPath',
@@ -1014,18 +820,15 @@ const saveDownloadSettings = () => {
downloadSettings.value.saveLyric
);
// 如果是在已下载页面，刷新列表以更新显示
if (tabName.value === 'downloaded') {
refreshDownloadedList();
downloadStore.refreshCompleted();
}
message.success(t('download.settingsPanel.saveSuccess'));
showSettingsDrawer.value = false;
};
// 初始化下载设置
const initDownloadSettings = async () => {
// 获取当前配置
const path = await window.electron.ipcRenderer.invoke('get-store-value', 'set.downloadPath');
const nameFormat = await window.electron.ipcRenderer.invoke(
'get-store-value',
@@ -1047,13 +850,10 @@ const initDownloadSettings = async () => {
saveLyric: saveLyric || false
};
// 初始化排序组件
updateFormatComponents();
};
// 根据格式更新组件
const updateFormatComponents = () => {
// 提取格式中的变量
const format = downloadSettings.value.nameFormat;
const matches = Array.from(format.matchAll(/\{(\w+)\}/g));
@@ -1071,30 +871,34 @@ const updateFormatComponents = () => {
}));
};
// 监听格式变化更新组件
watch(() => downloadSettings.value.nameFormat, updateFormatComponents);
// 监听命名格式变化，更新已下载文件的显示名称
watch(
() => downloadSettings.value.nameFormat,
() => {
if (downloadedList.value.length > 0) {
// 更新所有已下载项的显示名称
downloadedList.value = downloadedList.value.map((item) => ({
...item,
displayName: formatSongName(item) || item.filename
}));
// ── Lifecycle & watchers ────────────────────────────────────────────────────
// 保存到本地存储
localStorage.setItem('downloadedList', JSON.stringify(downloadedList.value));
onMounted(() => {
downloadStore.initListeners();
downloadStore.loadPersistedQueue();
downloadStore.refreshCompleted();
initDownloadSettings();
});
watch(
() => tabName.value,
(newVal) => {
if (newVal === 'downloaded') {
downloadStore.refreshCompleted();
}
}
);
// 初始化
onMounted(() => {
initDownloadSettings();
});
watch(
() => downloadStore.totalProgress,
(newVal) => {
if (newVal === 100) {
downloadStore.refreshCompleted();
}
}
);
</script>
<style lang="scss" scoped>
@@ -1121,20 +925,6 @@ onMounted(() => {
}
}
.action-btn-pill {
@apply transition-all border-neutral-200 dark:border-neutral-800;
&:hover:not(:disabled) {
@apply border-primary/30 bg-primary/5;
}
}
.action-btn-icon {
@apply transition-all;
&:hover {
@apply scale-110 text-primary bg-primary/10;
}
}
.downloading-item,
.downloaded-item {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);