feat: 添加心动模式播放

src/renderer/components/lyric/MusicFullMobile.vue

@@ -343,7 +343,7 @@
             <i class="ri-arrow-down-s-line"></i>
           </div>
           <div class="side-button" @click="togglePlayMode">
-            <i :class="playModeIcon"></i>
+            <i :class="[playModeIcon, { 'intelligence-active': playMode === 3 }]"></i>
           </div>
           <div class="main-button prev" @click="prevSong">
             <i class="ri-skip-back-fill"></i>
@@ -382,6 +382,7 @@ import {
   useLyricProgress
 } from '@/hooks/MusicHook';
 import { useArtist } from '@/hooks/useArtist';
+import { usePlayMode } from '@/hooks/usePlayMode';
 import { usePlayerStore } from '@/store/modules/player';
 import { DEFAULT_LYRIC_CONFIG, LyricConfig } from '@/types/lyric';
 import { getImgUrl, secondToMinute } from '@/utils';
@@ -394,19 +395,9 @@ const playerStore = usePlayerStore();
 // 播放控制相关
 const play = computed(() => playerStore.isPlay);
 const playIcon = computed(() => (play.value ? 'ri-pause-fill' : 'ri-play-fill'));
-const playMode = computed(() => playerStore.playMode);
-const playModeIcon = computed(() => {
-  switch (playMode.value) {
-    case 0:
-      return 'ri-repeat-line';
-    case 1:
-      return 'ri-repeat-one-line';
-    case 2:
-      return 'ri-shuffle-line';
-    default:
-      return 'ri-repeat-line';
-  }
-});
+
+// 播放模式
+const { playMode, playModeIcon, playModeText, togglePlayMode: togglePlayModeBase } = usePlayMode();
 // 打开播放列表
 const showPlaylist = () => {
   playerStore.setPlayListDrawerVisible(true);
@@ -963,12 +954,8 @@ const prevSong = () => {
 };
 
 const togglePlayMode = () => {
-  playerStore.togglePlayMode();
-  showBottomToast(
-    [t('player.playMode.sequence'), t('player.playMode.loop'), t('player.playMode.random')][
-      playMode.value
-    ]
-  );
+  togglePlayModeBase();
+  showBottomToast(playModeText.value);
 };
 
 const closeMusicFull = () => {
@@ -1525,6 +1512,10 @@ const getWordStyle = (lineIndex: number, _wordIndex: number, word: any) => {
           i {
             @apply text-2xl;
             color: var(--text-color-primary);
+
+            &.intelligence-active {
+              @apply text-green-500;
+            }
           }
 
           &:hover {

src/renderer/components/player/PlayBar.vue

@@ -105,15 +105,23 @@
       </div>
       <n-tooltip v-if="!isMobile" trigger="hover" :z-index="9999999">
         <template #trigger>
-          <i class="iconfont" :class="playModeIcon" @click="togglePlayMode"></i>
+          <i
+            class="iconfont"
+            :class="[playModeIcon, { 'intelligence-active': playMode === 3 }]"
+            @click="togglePlayMode"
+          ></i>
         </template>
         {{ playModeText }}
       </n-tooltip>
       <n-tooltip v-if="!isMobile" trigger="hover" :z-index="9999999">
         <template #trigger>
           <i
-            class="iconfont icon-likefill"
-            :class="{ 'like-active': isFavorite }"
+            class="iconfont"
+            :class="{
+              'like-active': isFavorite,
+              'ri-heart-3-fill': isFavorite,
+              'ri-heart-3-line': !isFavorite
+            }"
             @click="toggleFavorite"
           ></i>
         </template>
@@ -174,6 +182,7 @@ import {
   textColors
 } from '@/hooks/MusicHook';
 import { useArtist } from '@/hooks/useArtist';
+import { usePlayMode } from '@/hooks/usePlayMode';
 import { audioService } from '@/services/audioService';
 import { isBilibiliIdMatch, usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
@@ -282,38 +291,10 @@ const handleVolumeWheel = (e: WheelEvent) => {
 };
 
 // 播放模式
-const playMode = computed(() => playerStore.playMode);
-const playModeIcon = computed(() => {
-  switch (playMode.value) {
-    case 0:
-      return 'ri-repeat-2-line';
-    case 1:
-      return 'ri-repeat-one-line';
-    case 2:
-      return 'ri-shuffle-line';
-    default:
-      return 'ri-repeat-2-line';
-  }
-});
-const playModeText = computed(() => {
-  switch (playMode.value) {
-    case 0:
-      return t('player.playBar.playMode.sequence');
-    case 1:
-      return t('player.playBar.playMode.loop');
-    case 2:
-      return t('player.playBar.playMode.random');
-    default:
-      return t('player.playBar.playMode.sequence');
-  }
-});
+const { playMode, playModeIcon, playModeText, togglePlayMode } = usePlayMode();
 
 // 播放速度控制
 const { playbackRate } = storeToRefs(playerStore);
-// 切换播放模式
-const togglePlayMode = () => {
-  playerStore.togglePlayMode();
-};
 
 function handleNext() {
   playerStore.nextPlay();
@@ -645,6 +626,10 @@ const openPlayListDrawer = () => {
   @apply text-red-500 hover:text-red-600 !important;
 }
 
+.intelligence-active {
+  @apply text-green-500 hover:text-green-600 !important;
+}
+
 .disabled-icon {
   @apply opacity-50 cursor-not-allowed !important;
   &:hover {

src/renderer/components/player/SimplePlayBar.vue

@@ -20,7 +20,10 @@
       <div class="controls-section">
         <div class="left-controls">
           <button class="control-btn small-btn" @click="togglePlayMode">
-            <i class="iconfont" :class="playModeIcon"></i>
+            <i
+              class="iconfont"
+              :class="[playModeIcon, { 'intelligence-active': playMode === 3 }]"
+            ></i>
           </button>
         </div>
 
@@ -73,6 +76,7 @@
 import { computed, onMounted, ref, watch } from 'vue';
 
 import { allTime, nowTime, playMusic } from '@/hooks/MusicHook';
+import { usePlayMode } from '@/hooks/usePlayMode';
 import { audioService } from '@/services/audioService';
 import { usePlayerStore } from '@/store/modules/player';
 import { secondToMinute } from '@/utils';
@@ -93,24 +97,7 @@ const playBarRef = ref<HTMLElement | null>(null);
 const play = computed(() => playerStore.isPlay);
 
 // 播放模式
-const playMode = computed(() => playerStore.playMode);
-const playModeIcon = computed(() => {
-  switch (playMode.value) {
-    case 0:
-      return 'ri-repeat-2-line';
-    case 1:
-      return 'ri-repeat-one-line';
-    case 2:
-      return 'ri-shuffle-line';
-    default:
-      return 'ri-repeat-2-line';
-  }
-});
-
-// 切换播放模式
-const togglePlayMode = () => {
-  playerStore.togglePlayMode();
-};
+const { playMode, playModeIcon, togglePlayMode } = usePlayMode();
 
 // 音量控制
 const audioVolume = ref(
@@ -527,4 +514,8 @@ onMounted(() => {
   color: var(--fill-color);
   text-shadow: 0 0 8px var(--fill-color-transparent);
 }
+
+.intelligence-active {
+  @apply text-green-500;
+}
 </style>