From 5070a085e956375a25796e51b2d0561307cb5564 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Sat, 24 May 2025 19:23:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=94=B6=E8=97=8F?=
 =?UTF-8?q?=E5=92=8C=E5=8E=86=E5=8F=B2=E5=88=97=E8=A1=A8=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E5=8A=A0=E8=BD=BD=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=92=8C=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/renderer/views/favorite/index.vue         | 26 +++++++++++-----
 src/renderer/views/history/index.vue          | 30 +++++++++++++------
 .../views/historyAndFavorite/index.vue        |  8 +++--
 3 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/src/renderer/views/favorite/index.vue b/src/renderer/views/favorite/index.vue
index 697b957..bec557a 100644
--- 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
index 998d487..23f8887 100644
--- 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,11 +42,6 @@ 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();
@@ -54,6 +49,7 @@ 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
index 8c7668c..d6efecf 100644
--- 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>