✨ feat: 优化音乐列表加载策略，提升异步加载稳定性和错误处理

src/renderer/components/MusicList.vue

@@ -82,6 +82,7 @@
 </template>
 
 <script setup lang="ts">
+import { onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
 
@@ -147,18 +148,53 @@ const formatDetail = computed(() => (detail: any) => {
 
 const loadAllSongs = () => {
   return new Promise((resolve, reject) => {
-    const loadNext = () => {
+    // 设置最大重试次数
-      if (displayedSongs.value.length >= total.value) {
+    let retryCount = 0;
-        resolve(true);
+    const maxRetries = 3;
-        return;
-      }
 
-      loadMoreSongs()
+    const loadNext = async () => {
-        .then(() => {
+      try {
+        // 如果已经加载完所有歌曲或者达到最大重试次数，则解析 Promise
+        if (displayedSongs.value.length >= total.value) {
+          console.log('所有歌曲加载完成，总数:', displayedSongs.value.length);
+          resolve(true);
+          return;
+        }
+
+        // 如果重试次数过多，也解析 Promise，但记录警告
+        if (retryCount >= maxRetries) {
+          console.warn(
+            '达到最大重试次数，已加载:',
+            displayedSongs.value.length,
+            '总数:',
+            total.value
+          );
+          resolve(false);
+          return;
+        }
+
+        // 记录加载前的歌曲数量
+        const beforeCount = displayedSongs.value.length;
+
+        // 加载更多歌曲
+        await loadMoreSongs();
+
+        // 检查是否有新歌曲被加载
+        if (displayedSongs.value.length > beforeCount) {
+          // 重置重试计数
+          retryCount = 0;
           // 使用 setTimeout 避免阻塞主线程
           setTimeout(loadNext, 100);
-        })
+        } else {
-        .catch(reject);
+          // 如果没有新歌曲被加载，增加重试计数
+          retryCount++;
+          console.log('没有新歌曲被加载，重试:', retryCount);
+          setTimeout(loadNext, 500 * retryCount);
+        }
+      } catch (error) {
+        console.error('加载歌曲出错:', error);
+        reject(error);
+      }
     };
 
     loadNext();
@@ -180,10 +216,13 @@ const handlePlay = () => {
 
   // 如果还有未加载的歌曲，在后台异步加载
   if (displayedSongs.value.length < total.value) {
-    setTimeout(() => {
+    // 使用一个标志变量来跟踪后台加载状态
-      loadAllSongs()
+    const isBackgroundLoading = ref(true);
-        .then(() => {
+
-          // 加载完成后更新完整播放列表
+    loadAllSongs()
+      .then(() => {
+        // 加载完成后更新完整播放列表
+        if (isBackgroundLoading.value) {
           store.commit(
             'setPlayList',
             displayedSongs.value.map((item) => ({
@@ -194,12 +233,19 @@ const handlePlay = () => {
               }
             }))
           );
-        })
+        }
-        .catch((error) => {
+      })
-          console.error('加载完整播放列表失败:', error);
+      .catch((error) => {
-          window.$message.warning(t('common.partialLoadFailed'));
+        console.error('加载完整播放列表失败:', error);
-        });
+      })
-    }, 2000);
+      .finally(() => {
+        isBackgroundLoading.value = false;
+      });
+
+    // 监听组件销毁，避免组件已卸载时仍然更新状态
+    onUnmounted(() => {
+      isBackgroundLoading.value = false;
+    });
   }
 };