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

- 新建 DownloadManager 类（主进程），每个任务独立 AbortController 控制
- 新建 Pinia useDownloadStore 作为渲染进程单一数据源
- 支持暂停/恢复/取消下载，支持断点续传（Range header）
- 批量下载全部完成后发送汇总系统通知，单首不重复通知
- 并发数可配置（1-5），队列持久化（重启后恢复）
- 修复下载列表不全、封面加载失败、通知重复等 bug
- 修复本地/下载歌曲歌词加载：优先从 ID3/FLAC 元数据提取，API 作为 fallback
- 删除 useDownloadStatus.ts，统一状态管理
- DownloadDrawer/DownloadPage 全面重写，移除 @apply 违规
- 新增 5 语言 i18n 键值（暂停/恢复/取消/排队中等）

src/renderer/views/download/DownloadPage.vue

@@ -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);