From 2182c295c165b29db364985ce440a4412f322115 Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Sun, 15 Mar 2026 15:15:23 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E7=BB=9F=E4=B8=80=20MiniSongItem/List?=
 =?UTF-8?q?SongItem=20hover=20=E8=83=8C=E6=99=AF=E8=89=B2=E5=B9=B6?=
 =?UTF-8?q?=E6=B8=85=E7=90=86=20@apply=20(M-UI-02)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/songItemCom/ListSongItem.vue       | 110 +++++++++++++++---
 .../common/songItemCom/MiniSongItem.vue       |  96 ++++++++++++---
 2 files changed, 174 insertions(+), 32 deletions(-)

diff --git a/src/renderer/components/common/songItemCom/ListSongItem.vue b/src/renderer/components/common/songItemCom/ListSongItem.vue
index 10d0317..455138f 100644
--- a/src/renderer/components/common/songItemCom/ListSongItem.vue
+++ b/src/renderer/components/common/songItemCom/ListSongItem.vue
@@ -61,8 +61,8 @@
 
     <!-- 操作插槽 -->
     <template #operating>
-      <div class="song-item-operating song-item-operating-list">
-        <div v-if="favorite" class="song-item-operating-like">
+      <div class="song-item-operating-list">
+        <div v-if="favorite" class="song-item-operating-list-like">
           <i
             class="iconfont icon-likefill"
             :class="{ 'like-active': isFavorite }"
@@ -70,7 +70,7 @@
           ></i>
         </div>
         <div
-          class="song-item-operating-play bg-gray-300 dark:bg-gray-800 animate__animated"
+          class="song-item-operating-list-play bg-gray-300 dark:bg-gray-800 animate__animated"
           :class="{ 'bg-green-600': isPlaying, animate__flipInY: playLoading }"
           @click="onPlayMusic"
         >
@@ -133,7 +133,6 @@ const onImageLoad = (event: Event) => baseItem.value?.imageLoad(event);
 const onArtistClick = (id: number) => baseItem.value?.handleArtistClick(id);
 const onToggleFavorite = (event: Event) => {
   baseItem.value?.toggleFavorite(event);
-  // 可选：emit 收藏事件
 };
 const onPlayMusic = () => {
   baseItem.value?.playMusicEvent(props.item);
@@ -143,54 +142,131 @@ const onPlayMusic = () => {
 
 <style lang="scss" scoped>
 .list-song-item {
-  @apply p-2 rounded-xl mb-2 border dark:border-gray-800 border-gray-200;
+  padding: 0.5rem; /* p-2 */
+  border-radius: 0.75rem; /* rounded-xl */
+  margin-bottom: 0.5rem; /* mb-2 */
+  border-width: 1px;
+  border-color: rgb(229 231 235); /* border-gray-200 */
 
   &:hover {
-    @apply bg-gray-50 dark:bg-gray-800;
+    background-color: rgb(249 250 251); /* bg-gray-50 */
   }
 
   .song-item-img {
-    @apply w-10 h-10 rounded-xl mr-3;
+    width: 2.5rem; /* w-10 */
+    height: 2.5rem; /* h-10 */
+    border-radius: 0.75rem; /* rounded-xl */
+    margin-right: 0.75rem; /* mr-3 */
   }
 
   .song-item-content {
-    @apply flex items-center flex-1;
+    display: flex;
+    align-items: center;
+    flex: 1;
 
     &-wrapper {
-      @apply flex items-center flex-1 text-sm;
+      display: flex;
+      align-items: center;
+      flex: 1;
+      font-size: 0.875rem; /* text-sm */
+      line-height: 1.25rem;
     }
 
     &-title {
-      @apply flex-shrink-0 max-w-[45%] text-gray-900 dark:text-white;
+      flex-shrink: 0;
+      max-width: 45%;
+      color: rgb(17 24 39); /* text-gray-900 */
     }
 
     &-divider {
-      @apply mx-2 text-gray-500 dark:text-gray-400;
+      margin-left: 0.5rem; /* mx-2 */
+      margin-right: 0.5rem;
+      color: rgb(107 114 128); /* text-gray-500 */
     }
 
     &-name {
-      @apply flex-1 min-w-0 text-gray-500 dark:text-gray-400;
+      flex: 1;
+      min-width: 0;
+      color: rgb(107 114 128); /* text-gray-500 */
     }
   }
 
   .song-item-operating-list {
-    @apply flex items-center gap-2;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem; /* gap-2 */
 
     &-like {
-      @apply cursor-pointer hover:scale-110 transition-transform;
+      cursor: pointer;
+      transition-property: transform;
+      transition-duration: 0.15s;
+
+      &:hover {
+        transform: scale(1.1); /* hover:scale-110 */
+      }
 
       .iconfont {
-        @apply text-base text-gray-500 dark:text-gray-400 hover:text-red-500;
+        font-size: 1rem;
+        color: rgb(107 114 128); /* text-gray-500 */
+
+        &:hover {
+          color: rgb(239 68 68); /* hover:text-red-500 */
+        }
+      }
+
+      .like-active {
+        color: rgb(239 68 68) !important;
       }
     }
 
     &-play {
-      @apply w-7 h-7 cursor-pointer hover:scale-110 transition-transform;
+      width: 1.75rem; /* w-7 */
+      height: 1.75rem; /* h-7 */
+      cursor: pointer;
+      transition-property: transform;
+      transition-duration: 0.15s;
+      border-radius: 9999px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &:hover {
+        transform: scale(1.1); /* hover:scale-110 */
+      }
 
       .iconfont {
-        @apply text-base;
+        font-size: 1rem; /* text-base */
+      }
+
+      &.bg-green-600 {
+        background-color: rgb(34 197 94);
+        color: white;
       }
     }
   }
 }
+
+/* dark mode */
+.dark .list-song-item {
+  border-color: rgb(31 41 55); /* dark:border-gray-800 */
+
+  &:hover {
+    background-color: rgb(31 41 55); /* dark:bg-gray-800 */
+  }
+
+  .song-item-content {
+    &-title {
+      color: white;
+    }
+
+    &-divider,
+    &-name {
+      color: rgb(156 163 175); /* dark:text-gray-400 */
+    }
+  }
+
+  .song-item-operating-list-like .iconfont {
+    color: rgb(156 163 175); /* dark:text-gray-400 */
+  }
+}
 </style>
diff --git a/src/renderer/components/common/songItemCom/MiniSongItem.vue b/src/renderer/components/common/songItemCom/MiniSongItem.vue
index cb0544e..6aef88b 100644
--- a/src/renderer/components/common/songItemCom/MiniSongItem.vue
+++ b/src/renderer/components/common/songItemCom/MiniSongItem.vue
@@ -130,7 +130,6 @@ const onImageLoad = (event: Event) => baseItem.value?.imageLoad(event);
 const onArtistClick = (id: number) => baseItem.value?.handleArtistClick(id);
 const onToggleFavorite = (event: Event) => {
   baseItem.value?.toggleFavorite(event);
-  // 可选：emit 收藏事件
 };
 const onPlayMusic = () => {
   baseItem.value?.playMusicEvent(props.item);
@@ -140,56 +139,123 @@ const onPlayMusic = () => {
 
 <style lang="scss" scoped>
 .mini-song-item {
-  @apply p-2 rounded-xl;
+  padding: 0.5rem; /* p-2 */
+  border-radius: 0.75rem; /* rounded-xl */
 
   &:hover {
-    @apply bg-light-100 dark:bg-dark-100;
+    background-color: rgb(249 250 251); /* bg-gray-50 */
   }
 
   .song-item-img {
-    @apply w-10 h-10 mr-2 rounded-xl;
+    width: 2.5rem; /* w-10 */
+    height: 2.5rem; /* h-10 */
+    margin-right: 0.5rem; /* mr-2 */
+    border-radius: 0.75rem; /* rounded-xl */
   }
 
   .song-item-content {
-    @apply flex-1;
+    flex: 1;
 
     &-title {
-      @apply text-sm text-gray-900 dark:text-white;
+      font-size: 0.875rem; /* text-sm */
+      line-height: 1.25rem;
+      color: rgb(17 24 39); /* text-gray-900 */
     }
 
     &-name {
-      @apply text-xs text-gray-500 dark:text-gray-400;
+      font-size: 0.75rem; /* text-xs */
+      line-height: 1rem;
+      color: rgb(107 114 128); /* text-gray-500 */
     }
   }
 
   .song-item-operating {
-    @apply flex items-center rounded-full ml-4 pl-2 border dark:border-gray-700 border-gray-200 bg-light dark:bg-black;
+    display: flex;
+    align-items: center;
+    border-radius: 9999px; /* rounded-full */
+    margin-left: 1rem; /* ml-4 */
+    padding-left: 0.5rem; /* pl-2 */
+    border-width: 1px;
+    border-color: rgb(229 231 235); /* border-gray-200 */
+    background-color: #fff; /* bg-light fallback */
 
     .iconfont {
-      @apply text-base;
+      font-size: 1rem; /* text-base */
     }
 
     &-like {
-      @apply mr-1 ml-1 cursor-pointer;
+      margin-right: 0.25rem; /* mr-1 */
+      margin-left: 0.25rem; /* ml-1 */
+      cursor: pointer;
 
       .icon-likefill {
-        @apply text-base transition text-gray-500 dark:text-gray-400 hover:text-red-500;
+        font-size: 1rem;
+        transition-property: color;
+        transition-duration: 0.15s;
+        color: rgb(107 114 128); /* text-gray-500 */
+
+        &:hover {
+          color: rgb(239 68 68); /* hover:text-red-500 */
+        }
       }
 
       .like-active {
-        @apply text-red-500 dark:text-red-500;
+        color: rgb(239 68 68) !important; /* text-red-500 */
       }
     }
 
     &-play {
-      @apply cursor-pointer rounded-full w-8 h-8 flex justify-center items-center transition
-             border dark:border-gray-700 border-gray-200 text-gray-900 dark:text-white;
+      cursor: pointer;
+      border-radius: 9999px; /* rounded-full */
+      width: 2rem; /* w-8 */
+      height: 2rem; /* h-8 */
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition-property: all;
+      transition-duration: 0.15s;
+      border-width: 1px;
+      border-color: rgb(229 231 235); /* border-gray-200 */
+      color: rgb(17 24 39); /* text-gray-900 */
 
       &:hover,
       &.bg-green-600 {
-        @apply bg-green-500 border-green-500 text-white;
+        background-color: rgb(34 197 94); /* bg-green-500 = #22c55e */
+        border-color: rgb(34 197 94);
+        color: white;
       }
     }
   }
 }
+
+/* dark mode */
+.dark .mini-song-item {
+  &:hover {
+    background-color: rgb(31 41 55); /* dark:bg-gray-800 */
+  }
+
+  .song-item-content {
+    &-title {
+      color: white;
+    }
+
+    &-name {
+      color: rgb(156 163 175); /* dark:text-gray-400 */
+    }
+  }
+
+  .song-item-operating {
+    border-color: rgb(55 65 81); /* dark:border-gray-700 */
+    background-color: black; /* dark:bg-black */
+
+    &-like .icon-likefill {
+      color: rgb(156 163 175); /* dark:text-gray-400 */
+    }
+
+    &-play {
+      border-color: rgb(55 65 81); /* dark:border-gray-700 */
+      color: white; /* dark:text-white */
+    }
+  }
+}
 </style>