✨ feat: 准备下载管理

imsyy · imsyy · commit abbf423a20c1 · 2025-12-03T00:38:01.000+08:00
diff --git a/src/components/Layout/Menu.vue b/src/components/Layout/Menu.vue
@@ -132,13 +132,13 @@ const menuOptions = computed<MenuOption[] | MenuGroupOption[]>(() => {
           show: isLogin() === 1 && !settingStore.hideCloud,
           icon: renderIcon("Cloud"),
         },
-        // {
-        //   key: "download",
-        //   link: "download",
-        //   label: "下载管理",
-        //   show: isElectron,
-        //   icon: renderIcon("Download"),
-        // },
+        {
+          key: "download",
+          link: "download",
+          label: "下载管理",
+          show: isElectron,
+          icon: renderIcon("Download"),
+        },
         {
           key: "local",
           link: "local",
diff --git a/src/components/Modal/BatchList.vue b/src/components/Modal/BatchList.vue
@@ -161,52 +161,6 @@
         </n-flex>
       </template>
     </n-modal>
-
-    <!-- 批量下载进度通知 -->
-    <Teleport to="body">
-      <Transition name="slide-fade">
-        <div
-          v-if="batchDownloadState.isDownloading"
-          class="batch-download-notification"
-          :class="{ 'is-hovered': isNotificationHovered }"
-          @mouseenter="isNotificationHovered = true"
-          @mouseleave="isNotificationHovered = false"
-        >
-          <n-card content-style="padding: 16px;" :bordered="false">
-            <n-flex vertical :size="12">
-              <n-flex justify="space-between" align="center">
-                <n-text strong>批量下载中</n-text>
-                <n-text depth="3" style="font-size: 12px">
-                  {{ batchDownloadState.processed }}/{{ batchDownloadState.total }}
-                </n-text>
-              </n-flex>
-              
-              <n-text style="font-size: 13px" ellipsis>
-                正在下载: {{ batchDownloadState.currentSong }}
-              </n-text>
-              
-              <n-progress
-                type="line"
-                :percentage="batchDownloadState.percent"
-                :show-indicator="false"
-                processing
-                status="success"
-                style="height: 6px"
-              />
-              
-              <n-flex justify="space-between" style="font-size: 12px">
-                <n-text depth="3">
-                  {{ batchDownloadState.transferred }} / {{ batchDownloadState.totalSize }}
-                </n-text>
-                <n-text depth="3">
-                  成功: {{ batchDownloadState.success }}
-                </n-text>
-              </n-flex>
-            </n-flex>
-          </n-card>
-        </div>
-      </Transition>
-    </Teleport>
   </div>
 </template>
 
@@ -226,18 +180,17 @@ import {
   NInputGroup,
   NButton,
   NAlert,
-  NCard,
-  NProgress,
   NText,
   NFlex,
 } from "naive-ui";
-import { useLocalStore, useSettingStore } from "@/stores";
+import { useLocalStore, useSettingStore, useDataStore } from "@/stores";
 import { isElectron } from "@/utils/env";
 import { songLevelData, getSongLevelsData } from "@/utils/meta";
 import { downloadSong } from "@/utils/download";
 
 const localStore = useLocalStore();
 const settingStore = useSettingStore();
+const dataStore = useDataStore();
 
 interface DataType {
   key?: number;
@@ -269,19 +222,6 @@ const showQualityModal = ref(false);
 const selectedQuality = ref<SongLevelType>("h");
 const downloadPath = ref<string>(settingStore.downloadPath);
 
-// 批量下载状态
-const batchDownloadState = reactive({
-  isDownloading: false,
-  total: 0,
-  processed: 0,
-  success: 0,
-  currentSong: "",
-  percent: 0,
-  transferred: "0MB",
-  totalSize: "0MB",
-});
-const isNotificationHovered = ref(false);
-
 // 音质选项
 const qualityOptions = computed(() => {
   // 批量下载时，默认显示所有常用音质选项
@@ -474,23 +414,26 @@ const executeBatchDownload = async (songs: SongType[]) => {
   if (!songs.length) return;
 
   // 重置状态
-  batchDownloadState.isDownloading = true;
-  batchDownloadState.total = songs.length;
-  batchDownloadState.processed = 0;
-  batchDownloadState.success = 0;
-  batchDownloadState.percent = 0;
-  batchDownloadState.transferred = "0MB";
-  batchDownloadState.totalSize = "0MB";
+  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 onProgress = (
+    _event: any,
+    progress: { percent: number; transferredBytes: number; totalBytes: number },
+  ) => {
     const { percent, transferredBytes, totalBytes } = progress;
-    batchDownloadState.percent = Number((percent * 100).toFixed(0));
-    batchDownloadState.transferred = (transferredBytes / 1024 / 1024).toFixed(2) + "MB";
-    batchDownloadState.totalSize = (totalBytes / 1024 / 1024).toFixed(2) + "MB";
+    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) {
@@ -499,7 +442,7 @@ const executeBatchDownload = async (songs: SongType[]) => {
 
   try {
     for (const song of songs) {
-      batchDownloadState.currentSong = song.name;
+      dataStore.batchDownload.currentSong = song.name;
       try {
         const result = await downloadSong({
           song,
@@ -509,7 +452,7 @@ const executeBatchDownload = async (songs: SongType[]) => {
         });
 
         if (result.success) {
-          batchDownloadState.success++;
+          dataStore.batchDownload.success++;
           if (result.skipped) {
             window.$notification.create({
               title: "已跳过重复文件",
@@ -531,32 +474,50 @@ const executeBatchDownload = async (songs: SongType[]) => {
         failCount++;
         failedSongs.push(song);
       } finally {
-        batchDownloadState.processed++;
+        dataStore.batchDownload.processed++;
         // Reset progress for next song
-        batchDownloadState.percent = 0;
-        batchDownloadState.transferred = "0MB";
-        batchDownloadState.totalSize = "0MB";
+        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" }, `${batchDownloadState.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 || '未知歌手'}`))
-          ])
-        ]),
+        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(`批量下载完成，共 ${batchDownloadState.success} 首`);
+      window.$message.success(`批量下载完成，共 ${dataStore.batchDownload.success} 首`);
     }
   } catch (error) {
     console.error("Batch download error:", error);
@@ -565,7 +526,7 @@ const executeBatchDownload = async (songs: SongType[]) => {
     if (isElectron) {
       window.electron.ipcRenderer.removeListener("download-progress", onProgress);
     }
-    batchDownloadState.isDownloading = false;
+    dataStore.batchDownload.isDownloading = false;
   }
 };
 </script>
@@ -577,35 +538,4 @@ const executeBatchDownload = async (songs: SongType[]) => {
 .range-input {
   width: 100px;
 }
-
-.batch-download-notification {
-  position: fixed;
-  bottom: 24px;
-  right: 24px;
-  z-index: 9999;
-  width: 320px;
-  transition: all 0.3s ease;
-  
-  &.is-hovered {
-    opacity: 0;
-    transform: translateY(10px);
-    pointer-events: none;
-  }
-  
-  :deep(.n-card) {
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-  }
-}
-
-.slide-fade-enter-active,
-.slide-fade-leave-active {
-  transition: all 0.3s ease;
-}
-
-.slide-fade-enter-from,
-.slide-fade-leave-to {
-  transform: translateY(20px);
-  opacity: 0;
-}
 </style>
diff --git a/src/stores/data.ts b/src/stores/data.ts
@@ -10,8 +10,8 @@ import type {
 import { playlistCatlist } from "@/api/playlist";
 import { cloneDeep, isEmpty } from "lodash-es";
 import { isLogin } from "@/utils/auth";
-import localforage from "localforage";
 import { formatCategoryList } from "@/utils/format";
+import localforage from "localforage";
 
 interface ListState {
   playList: SongType[];
@@ -33,6 +33,25 @@ interface ListState {
     cats: CatType[];
     hqCats: CatType[];
   };
+  /** 批量下载 */
+  batchDownload: {
+    /** 是否正在下载 */
+    isDownloading: boolean;
+    /** 下载总数 */
+    total: number;
+    /** 已处理数量 */
+    processed: number;
+    /** 成功数量 */
+    success: number;
+    /** 当前下载歌曲 */
+    currentSong: string;
+    /** 当前歌曲下载进度 */
+    percent: number;
+    /** 已传输大小 */
+    transferred: string;
+    /** 总大小 */
+    totalSize: string;
+  };
 }
 
 type UserDataKeys = keyof ListState["userLikeData"];
@@ -100,6 +119,17 @@ export const useDataStore = defineStore("data", {
       cats: [],
       hqCats: [],
     },
+    // 批量下载
+    batchDownload: {
+      isDownloading: false,
+      total: 0,
+      processed: 0,
+      success: 0,
+      currentSong: "",
+      percent: 0,
+      transferred: "0MB",
+      totalSize: "0MB",
+    },
   }),
   getters: {
     // 是否为喜欢歌曲
diff --git a/src/views/Download/downloading.vue b/src/views/Download/downloading.vue
@@ -1,14 +1,58 @@
 <template>
   <div class="download-downloading">
-    <n-empty description="暂无正在下载的任务" class="empty" />
+    <div v-if="dataStore.batchDownload.isDownloading" class="download-card">
+      <n-card content-style="padding: 16px;" :bordered="false">
+        <n-flex vertical :size="12">
+          <n-flex justify="space-between" align="center">
+            <n-text strong>批量下载中</n-text>
+            <n-text depth="3" style="font-size: 12px">
+              {{ dataStore.batchDownload.processed }}/{{ dataStore.batchDownload.total }}
+            </n-text>
+          </n-flex>
+          <n-text style="font-size: 13px" ellipsis>
+            正在下载: {{ dataStore.batchDownload.currentSong }}
+          </n-text>
+          <n-progress
+            type="line"
+            :percentage="dataStore.batchDownload.percent"
+            :show-indicator="false"
+            processing
+            status="success"
+            style="height: 6px"
+          />
+          <n-flex justify="space-between" style="font-size: 12px">
+            <n-text depth="3">
+              {{ dataStore.batchDownload.transferred }} / {{ dataStore.batchDownload.totalSize }}
+            </n-text>
+            <n-text depth="3">
+              成功: {{ dataStore.batchDownload.success }}
+            </n-text>
+          </n-flex>
+        </n-flex>
+      </n-card>
+    </div>
+    <n-empty v-else description="暂无正在下载的任务" class="empty" />
   </div>
 </template>
 
+<script setup lang="ts">
+import { useDataStore } from "@/stores";
+
+const dataStore = useDataStore();
+</script>
+
 <style lang="scss" scoped>
 .download-downloading {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  .download-card {
+    width: 400px;
+    :deep(.n-card) {
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+  }
 }
 </style>
