feat: 优化收藏和历史列表组件，添加加载状态管理和动画效果

algerkong · algerkong · commit 5070a085e956 · 2025-05-24T19:23:38.000+08:00
diff --git a/src/renderer/views/favorite/index.vue b/src/renderer/views/favorite/index.vue
@@ -80,6 +80,7 @@
             :key="song.id"
             :item="song"
             :favorite="false"
+            class="favorite-list-item"
             :class="setAnimationClass('animate__bounceInLeft')"
             :style="getItemAnimationDelay(index)"
             :selectable="isSelecting"
@@ -103,7 +104,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, ref, watch, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -339,20 +340,27 @@ const handleBatchDownload = async () => {
     }
   };
 
+  const hasLoaded = ref(false);
+
   onMounted(async () => {
-    await playerStore.initializeFavoriteList();
-    await getFavoriteSongs();
+    if (!hasLoaded.value) {
+      await playerStore.initializeFavoriteList();
+      await getFavoriteSongs();
+      hasLoaded.value = true;
+    }
   });
 
-  // 监听收藏列表变化
+  // 监听收藏列表变化，变化时重置并重新加载
   watch(
     favoriteList,
-    () => {
+    async () => {
+      hasLoaded.value = false;
       currentPage.value = 1;
       noMore.value = false;
-      getFavoriteSongs();
+      await getFavoriteSongs();
+      hasLoaded.value = true;
     },
-    { deep: true, immediate: true }
+    { deep: true }
   );
 
   const handlePlay = () => {
@@ -505,7 +513,9 @@ const handleBatchDownload = async () => {
 
         .favorite-list {
           @apply space-y-2 pb-4 px-4;
-
+          &-item {
+            @apply bg-light-100 dark:bg-dark-100 hover:bg-light-200 dark:hover:bg-dark-200 transition-all;
+          }
           &-more {
             @apply mt-4;
 
diff --git a/src/renderer/views/history/index.vue b/src/renderer/views/history/index.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { getBilibiliProxyUrl, getBilibiliVideoDetail } from '@/api/bilibili';
@@ -42,18 +42,14 @@ import { useMusicHistory } from '@/hooks/MusicHistoryHook';
 import { usePlayerStore } from '@/store/modules/player';
 import type { SongResult } from '@/type/music';
 import { setAnimationClass, setAnimationDelay } from '@/utils';
-
-defineOptions({
-  name: 'History'
-});
-
 const { t } = useI18n();
 const { delMusic, musicList } = useMusicHistory();
 const scrollbarRef = ref();
 const loading = ref(false);
 const noMore = ref(false);
 const displayList = ref<SongResult[]>([]);
 const playerStore = usePlayerStore();
+const hasLoaded = ref(false);
 
 // 无限滚动相关配置
 const pageSize = 100;
@@ -178,10 +174,26 @@ const handlePlay = () => {
   playerStore.setPlayList(displayList.value);
 };
 
-onMounted(() => {
-  getHistorySongs();
+onMounted(async () => {
+  if (!hasLoaded.value) {
+    await getHistorySongs();
+    hasLoaded.value = true;
+  }
 });
 
+// 监听历史列表变化，变化时重置并重新加载
+watch(
+  musicList,
+  async () => {
+    hasLoaded.value = false;
+    currentPage.value = 1;
+    noMore.value = false;
+    await getHistorySongs();
+    hasLoaded.value = true;
+  },
+  { deep: true }
+);
+
 // 重写删除方法，需要同时更新 displayList
 const handleDelMusic = async (item: SongResult) => {
   delMusic(item);
@@ -205,7 +217,7 @@ const handleDelMusic = async (item: SongResult) => {
     .history-item {
       @apply flex items-center justify-between;
       &-content {
-        @apply flex-1;
+        @apply flex-1 bg-light-100 dark:bg-dark-100 hover:bg-light-200 dark:hover:bg-dark-200 transition-all;
       }
       &-count {
         @apply px-4 text-lg text-center;
diff --git a/src/renderer/views/historyAndFavorite/index.vue b/src/renderer/views/historyAndFavorite/index.vue
@@ -1,13 +1,17 @@
 <template>
   <div class="flex gap-4 h-full pb-4">
     <favorite class="flex-item" />
-    <history class="flex-item" />
+    <history-list class="flex-item" />
   </div>
 </template>
 
 <script setup lang="ts">
+defineOptions({
+  name: 'History'
+});
+
 import Favorite from '@/views/favorite/index.vue';
-import History from '@/views/history/index.vue';
+import HistoryList from '@/views/history/index.vue';
 </script>
 
 <style scoped>
