Merge pull request #609 from imsyy/dev-dl

✨ feat: 完善下载管理页面

Author: imsyy

components.d.ts

@@ -23,6 +23,8 @@ declare module 'vue' {
     CoverList: typeof import('./src/components/List/CoverList.vue')['default']
     CoverMenu: typeof import('./src/components/Menu/CoverMenu.vue')['default']
     CreatePlaylist: typeof import('./src/components/Modal/CreatePlaylist.vue')['default']
+    DownloadManager: typeof import('./src/components/Global/DownloadManager.vue')['default']
+    DownloadModal: typeof import('./src/components/Modal/DownloadModal.vue')['default']
     DownloadSong: typeof import('./src/components/Modal/DownloadSong.vue')['default']
     Equalizer: typeof import('./src/components/Modal/Equalizer.vue')['default']
     ExcludeLyrics: typeof import('./src/components/Modal/ExcludeLyrics.vue')['default']

electron/main/ipc/ipc-file.ts

@@ -1,6 +1,6 @@
 import { app, BrowserWindow, dialog, ipcMain, shell } from "electron";
 import { basename, dirname, extname, isAbsolute, join, relative, resolve } from "path";
-import { access, readdir, readFile, stat, unlink, writeFile } from "fs/promises";
+import { access, mkdir, readdir, readFile, stat, unlink, writeFile } from "fs/promises";
 import { parseFile } from "music-metadata";
 import { getFileID, getFileMD5, metaDataLyricsArrayToLrc } from "../utils/helper";
 import { File, Picture, Id3v2Settings, TagTypes } from "node-taglib-sharp";
@@ -379,10 +379,10 @@ const initFileIpc = (): void => {
         songData?: any;
         skipIfExist?: boolean;
       } = {
-          fileName: "未知文件名",
-          fileType: "mp3",
-          path: app.getPath("downloads"),
-        },
+        fileName: "未知文件名",
+        fileType: "mp3",
+        path: app.getPath("downloads"),
+      },
     ): Promise<{ status: "success" | "skipped" | "error"; message?: string }> => {
       try {
         // 获取窗口
@@ -403,11 +403,11 @@ const initFileIpc = (): void => {
         } = options;
         // 规范化路径
         const downloadPath = resolve(path);
-        // 检查文件夹是否存在
+        // 检查文件夹是否存在，不存在则自动递归创建
         try {
           await access(downloadPath);
         } catch {
-          throw new Error("❌ Folder not found");
+          await mkdir(downloadPath, { recursive: true });
         }
 
         // 检查文件是否存在
@@ -425,8 +425,9 @@ const initFileIpc = (): void => {
         const songDownload = await download(win, url, {
           directory: downloadPath,
           filename: `${fileName}.${fileType}`,
+          showProgressBar: false,
           onProgress: (progress) => {
-            win.webContents.send("download-progress", progress);
+            win.webContents.send("download-progress", { ...progress, id: songData?.id });
           },
         });
         if (!downloadMeta || !songData?.cover) return { status: "success" };
@@ -435,6 +436,7 @@ const initFileIpc = (): void => {
         const coverDownload = await download(win, coverUrl, {
           directory: downloadPath,
           filename: `${fileName}.jpg`,
+          showProgressBar: false,
         });
         // 读取歌曲文件
         let songFile = File.createFromPath(songDownload.getSavePath());
@@ -471,7 +473,10 @@ const initFileIpc = (): void => {
         return { status: "success" };
       } catch (error) {
         ipcLog.error("❌ Error downloading file:", error);
-        return { status: "error", message: error instanceof Error ? error.message : "Unknown error" };
+        return {
+          status: "error",
+          message: error instanceof Error ? error.message : "Unknown error",
+        };
       }
     },
   );

src/assets/icons/DownloadDone.svg

@@ -25,6 +25,7 @@ import {
   NButton,
   NEllipsis,
   NAvatar,
+  NBadge,
 } from "naive-ui";
 import type { CoverType } from "@/types/main";
 import { useStatusStore, useSettingStore, useDataStore, useMusicStore } from "@/stores";
@@ -134,9 +135,17 @@ const menuOptions = computed<MenuOption[] | MenuGroupOption[]>(() => {
         },
         {
           key: "download",
-          link: "download",
-          label: "下载管理",
-          show: isElectron,
+          label: () =>
+            h(
+              NBadge,
+              {
+                show: dataStore.downloadingSongs.length > 0,
+                value: dataStore.downloadingSongs.length,
+                offset: [22, 13],
+              },
+              () => "下载管理",
+            ),
+          show: isElectron && !settingStore.hideDownload,
           icon: renderIcon("Download"),
         },
         {
@@ -282,6 +291,13 @@ const menuUpdate = (key: string, item: MenuOption) => {
           name: "like-songs",
         });
         break;
+      // 下载管理
+      case "download":
+        router.push({
+          name:
+            dataStore.downloadingSongs.length > 0 ? "download-downloading" : "download-downloaded",
+        });
+        break;
       default:
         break;
     }

src/components/Layout/Menu.vue

@@ -100,97 +100,20 @@
         </n-button>
       </n-flex>
     </n-flex>
-
-    <!-- 音质选择弹窗 -->
-    <n-modal
-      v-model:show="showQualityModal"
-      preset="card"
-      title="批量下载"
-      :closable="false"
-      :mask-closable="false"
-      style="width: 500px"
-    >
-      <n-alert type="warning" title="请知悉" closable style="margin-top: 20px">
-        本软件仅支持从官方途径合法合规的下载歌曲，并用于学习研究用途。本功能将严格按照相应账户的权限来提供基础的下载功能
-      </n-alert>
-      <n-collapse
-        :default-expanded-names="['level', 'path']"
-        arrow-placement="right"
-        style="margin-top: 20px"
-      >
-        <n-collapse-item title="音质选择" name="level">
-          <n-radio-group v-model:value="selectedQuality" name="quality">
-            <n-flex>
-              <n-radio v-for="(item, index) in qualityOptions" :key="index" :value="item.value">
-                <n-flex>
-                  <n-text class="name">{{ item.label }}</n-text>
-                </n-flex>
-              </n-radio>
-            </n-flex>
-          </n-radio-group>
-          <n-text depth="3" style="font-size: 12px; margin-top: 10px; display: block">
-            注意：如果歌曲没有对应的音质，将自动下载最高可用音质
-          </n-text>
-        </n-collapse-item>
-        <n-collapse-item v-if="isElectron" title="下载路径" name="path">
-          <n-input-group>
-            <n-input :value="downloadPath || '未配置下载目录'" disabled>
-              <template #prefix>
-                <SvgIcon name="Folder" />
-              </template>
-            </n-input>
-            <n-button type="primary" strong secondary @click="changeDownloadPath">
-              <template #icon>
-                <SvgIcon name="Folder" />
-              </template>
-            </n-button>
-            <n-button type="primary" strong secondary @click="openSetting('local')">
-              <template #icon>
-                <SvgIcon name="Settings" />
-              </template>
-              更多设置
-            </n-button>
-          </n-input-group>
-        </n-collapse-item>
-      </n-collapse>
-
-      <template #action>
-        <n-flex justify="end">
-          <n-button @click="showQualityModal = false">取消</n-button>
-          <n-button type="primary" @click="startBatchDownload">确认下载</n-button>
-        </n-flex>
-      </template>
-    </n-modal>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { DataTableColumns, DataTableRowKey } from "naive-ui";
-import type { SongType, SongLevelType } from "@/types/main";
-import { isArray, isObject, pick } from "lodash-es";
-import { openPlaylistAdd, openSetting } from "@/utils/modal";
+import type { SongType } from "@/types/main";
+import { isArray, isObject } from "lodash-es";
+import { openPlaylistAdd } from "@/utils/modal";
 import { deleteSongs } from "@/utils/auth";
-import {
-  NInput,
-  NInputNumber,
-  NRadioGroup,
-  NRadio,
-  NCollapse,
-  NCollapseItem,
-  NInputGroup,
-  NButton,
-  NAlert,
-  NText,
-  NFlex,
-} from "naive-ui";
-import { useLocalStore, useSettingStore, useDataStore } from "@/stores";
-import { isElectron } from "@/utils/env";
-import { songLevelData, getSongLevelsData } from "@/utils/meta";
-import { downloadSong } from "@/utils/download";
+import { NInput, NInputNumber, NButton, NText, NFlex } from "naive-ui";
+import { useLocalStore } from "@/stores";
+import { openDownloadSongs } from "@/utils/modal";
 
 const localStore = useLocalStore();
-const settingStore = useSettingStore();
-const dataStore = useDataStore();
 
 interface DataType {
   key?: number;
@@ -217,23 +140,6 @@ const checkedRowKeys = ref<DataTableRowKey[]>([]);
 const startRange = ref<number | null>(null);
 const endRange = ref<number | null>(null);
 
-// 下载相关
-const showQualityModal = ref(false);
-const selectedQuality = ref<SongLevelType>("h");
-const downloadPath = ref<string>(settingStore.downloadPath);
-
-// 音质选项
-const qualityOptions = computed(() => {
-  // 批量下载时，默认显示所有常用音质选项
-  // 这里模拟一个包含所有常用音质的 level 对象
-  const levels = pick(songLevelData, ["l", "m", "h", "sq", "hr", "je", "sk", "db", "jm"]);
-  return getSongLevelsData(levels).map((item) => ({
-    label: item.name,
-    value: item.value,
-    level: item.level,
-  }));
-});
-
 // 表头数据
 const columnsData = computed<DataTableColumns<DataType>>(() => [
   {
@@ -395,139 +301,11 @@ const handleDeleteLocalSongs = () => {
 
 // 批量下载处理
 const handleBatchDownloadClick = () => {
-  if (settingStore.downloadPath) downloadPath.value = settingStore.downloadPath;
-  showQualityModal.value = true;
-};
-
-// 更改下载路径
-const changeDownloadPath = async () => {
-  const path = await window.electron.ipcRenderer.invoke("choose-path");
-  if (path) downloadPath.value = path;
-};
-
-const startBatchDownload = () => {
-  showQualityModal.value = false;
-  executeBatchDownload(checkSongData.value);
-};
-
-const executeBatchDownload = async (songs: SongType[]) => {
-  if (!songs.length) return;
-
-  // 重置状态
-  dataStore.batchDownload.isDownloading = true;
-  dataStore.batchDownload.total = songs.length;
-  dataStore.batchDownload.processed = 0;
-  dataStore.batchDownload.success = 0;
-  dataStore.batchDownload.percent = 0;
-  dataStore.batchDownload.transferred = "0MB";
-  dataStore.batchDownload.totalSize = "0MB";
-
-  let failCount = 0;
-  const failedSongs: SongType[] = [];
-
-  // 监听下载进度
-  const onProgress = (
-    _event: any,
-    progress: { percent: number; transferredBytes: number; totalBytes: number },
-  ) => {
-    const { percent, transferredBytes, totalBytes } = progress;
-    dataStore.batchDownload.percent = Number((percent * 100).toFixed(0));
-    dataStore.batchDownload.transferred = (transferredBytes / 1024 / 1024).toFixed(2) + "MB";
-    dataStore.batchDownload.totalSize = (totalBytes / 1024 / 1024).toFixed(2) + "MB";
-  };
-
-  if (isElectron) {
-    window.electron.ipcRenderer.on("download-progress", onProgress);
-  }
-
-  try {
-    for (const song of songs) {
-      dataStore.batchDownload.currentSong = song.name;
-      try {
-        const result = await downloadSong({
-          song,
-          quality: selectedQuality.value,
-          downloadPath: downloadPath.value,
-          skipIfExist: true,
-        });
-
-        if (result.success) {
-          dataStore.batchDownload.success++;
-          if (result.skipped) {
-            window.$notification.create({
-              title: "已跳过重复文件",
-              content: `${song.name} 已存在`,
-              duration: 2000,
-            });
-          }
-          if (!isElectron) {
-            // Browser download delay
-            await new Promise((resolve) => setTimeout(resolve, 500));
-          }
-        } else {
-          console.error(`Failed to download song ${song.name}: ${result.message}`);
-          failCount++;
-          failedSongs.push(song);
-        }
-      } catch (err) {
-        console.error(`Error downloading song ${song.name}:`, err);
-        failCount++;
-        failedSongs.push(song);
-      } finally {
-        dataStore.batchDownload.processed++;
-        // Reset progress for next song
-        dataStore.batchDownload.percent = 0;
-        dataStore.batchDownload.transferred = "0MB";
-        dataStore.batchDownload.totalSize = "0MB";
-      }
-    }
-
-    if (failCount > 0) {
-      window.$dialog.warning({
-        title: "下载完成，但有部分失败",
-        content: () =>
-          h("div", [
-            h(
-              "div",
-              { style: "margin-bottom: 10px" },
-              `${dataStore.batchDownload.success} 首下载成功，${failCount} 首下载失败。`,
-            ),
-            h(
-              "div",
-              {
-                style:
-                  "max-height: 200px; overflow-y: auto; background: rgba(0,0,0,0.05); padding: 8px; border-radius: 4px;",
-              },
-              [
-                h("div", { style: "font-weight: bold; margin-bottom: 4px" }, "失败列表："),
-                ...failedSongs.map((s) =>
-                  h(
-                    "div",
-                    { style: "font-size: 12px" },
-                    `${s.name} - ${isArray(s.artists) ? s.artists[0]?.name : s.artists || "未知歌手"}`,
-                  ),
-                ),
-              ],
-            ),
-          ]),
-        positiveText: "重试失败歌曲",
-        negativeText: "取消",
-        onPositiveClick: () => {
-          executeBatchDownload(failedSongs);
-        },
-      });
-    } else {
-      window.$message.success(`批量下载完成，共 ${dataStore.batchDownload.success} 首`);
-    }
-  } catch (error) {
-    console.error("Batch download error:", error);
-    window.$message.error("批量下载过程中出现错误");
-  } finally {
-    if (isElectron) {
-      window.electron.ipcRenderer.removeListener("download-progress", onProgress);
-    }
-    dataStore.batchDownload.isDownloading = false;
+  if (checkSongData.value.length === 0) {
+    window.$message.warning("请选择要下载的歌曲");
+    return;
   }
+  openDownloadSongs(checkSongData.value);
 };
 </script>