refactor: 更新 eslint 和 prettier 配置 格式化代码

src/renderer/components/player/AdvancedControlsPopover.vue

@@ -1,18 +1,18 @@
 <template>
-  <n-dropdown 
-    :show="showDropdown" 
-    :options="dropdownOptions" 
-    trigger="hover" 
+  <n-dropdown
+    :show="showDropdown"
+    :options="dropdownOptions"
+    trigger="hover"
     :z-index="9999999"
     @select="handleSelect"
     placement="top"
-    @update:show="(show) => showDropdown = show"
+    @update:show="(show) => (showDropdown = show)"
   >
     <n-tooltip trigger="hover" :z-index="9999999">
       <template #trigger>
         <div class="advanced-controls-btn">
           <i class="iconfont ri-settings-3-line"></i>
-          
+
           <!-- 激活状态的小标记 -->
           <div v-if="hasActiveSettings" class="active-indicator">
             <span v-if="hasActiveSleepTimer" class="timer-badge">
@@ -26,7 +26,12 @@
   </n-dropdown>
 
   <!-- EQ 均衡器弹窗 -->
-  <n-modal v-model:show="showEQModal" :mask-closable="true" :unstable-show-mask="false" :z-index="9999999">
+  <n-modal
+    v-model:show="showEQModal"
+    :mask-closable="true"
+    :unstable-show-mask="false"
+    :z-index="9999999"
+  >
     <div class="eq-modal-content">
       <div class="modal-close" @click="showEQModal = false">
         <i class="ri-close-line"></i>
@@ -36,7 +41,12 @@
   </n-modal>
 
   <!-- 定时关闭弹窗 -->
-  <n-modal v-model:show="playerStore.showSleepTimer" :mask-closable="true" :unstable-show-mask="false" :z-index="9999999">
+  <n-modal
+    v-model:show="playerStore.showSleepTimer"
+    :mask-closable="true"
+    :unstable-show-mask="false"
+    :z-index="9999999"
+  >
     <div class="timer-modal-content">
       <div class="modal-close" @click="playerStore.showSleepTimer = false">
         <i class="ri-close-line"></i>
@@ -46,18 +56,23 @@
   </n-modal>
 
   <!-- 播放速度设置弹窗 -->
-  <n-modal v-model:show="showSpeedModal" :mask-closable="true" :unstable-show-mask="false" :z-index="9999999">
+  <n-modal
+    v-model:show="showSpeedModal"
+    :mask-closable="true"
+    :unstable-show-mask="false"
+    :z-index="9999999"
+  >
     <div class="speed-modal-content">
       <div class="modal-close" @click="showSpeedModal = false">
         <i class="ri-close-line"></i>
       </div>
       <h3>{{ t('player.playBar.playbackSpeed') }}</h3>
       <div class="speed-options">
-        <div 
-          v-for="option in playbackRateOptions" 
+        <div
+          v-for="option in playbackRateOptions"
           :key="option.key"
           class="speed-option"
-          :class="{ 'active': playbackRate === option.key }"
+          :class="{ active: playbackRate === option.key }"
           @click="selectSpeed(option.key)"
         >
           {{ option.label }}
@@ -68,12 +83,13 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, h, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { DropdownOption } from 'naive-ui';
-import { usePlayerStore } from '@/store/modules/player';
+import { computed, h, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
 import EqControl from '@/components/EQControl.vue';
 import SleepTimer from '@/components/player/SleepTimer.vue';
+import { usePlayerStore } from '@/store/modules/player';
 
 const { t } = useI18n();
 const playerStore = usePlayerStore();
@@ -93,13 +109,16 @@ watch(showEQModal, (newValue) => {
   }
 });
 
-watch(() => playerStore.showSleepTimer, (newValue) => {
-  if (newValue) {
-    // 如果睡眠定时器弹窗打开，关闭其他弹窗
-    showEQModal.value = false;
-    showSpeedModal.value = false;
+watch(
+  () => playerStore.showSleepTimer,
+  (newValue) => {
+    if (newValue) {
+      // 如果睡眠定时器弹窗打开，关闭其他弹窗
+      showEQModal.value = false;
+      showSpeedModal.value = false;
+    }
   }
-});
+);
 
 watch(showSpeedModal, (newValue) => {
   if (newValue) {
@@ -142,14 +161,17 @@ const dropdownOptions = computed<DropdownOption[]>(() => [
     key: 'timer',
     icon: () => h('i', { class: 'ri-timer-line' }),
     // 如果有激活的定时器，添加标记
-    suffix: () => hasActiveSleepTimer.value ? h('span', { class: 'active-option-mark' }) : null
+    suffix: () => (hasActiveSleepTimer.value ? h('span', { class: 'active-option-mark' }) : null)
   },
   {
     label: t('player.playBar.playbackSpeed') + `(${playbackRate.value}x)`,
     key: 'speed',
     icon: () => h('i', { class: 'ri-speed-line' }),
     // 如果播放速度不是1.0，添加标记
-    suffix: () => playbackRate.value !== 1.0 ? h('span', { class: 'active-option-mark' }, `${playbackRate.value}x`) : null
+    suffix: () =>
+      playbackRate.value !== 1.0
+        ? h('span', { class: 'active-option-mark' }, `${playbackRate.value}x`)
+        : null
   }
 ]);
 
@@ -159,7 +181,7 @@ const handleSelect = (key: string) => {
   showEQModal.value = false;
   playerStore.showSleepTimer = false;
   showSpeedModal.value = false;
-  
+
   // 然后仅打开所选弹窗
   switch (key) {
     case 'eq':
@@ -179,18 +201,17 @@ const selectSpeed = (speed: number) => {
   playerStore.setPlaybackRate(speed);
   showSpeedModal.value = false;
 };
-
 </script>
 
 <style lang="scss" scoped>
 .sleep-timer-countdown {
   @apply fixed top-0 left-1/2 transform -translate-x-1/2 py-1 px-3 rounded-b-lg bg-green-500 text-white text-sm flex items-center;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
   z-index: 9998;
   min-width: 80px;
   text-align: center;
   animation: fadeInDown 0.3s ease-out;
-  
+
   @keyframes fadeInDown {
     from {
       transform: translate(-50%, -100%);
@@ -201,7 +222,7 @@ const selectSpeed = (speed: number) => {
       opacity: 1;
     }
   }
-  
+
   span {
     font-variant-numeric: tabular-nums;
     letter-spacing: 0.5px;
@@ -211,28 +232,29 @@ const selectSpeed = (speed: number) => {
 
 .advanced-controls-btn {
   @apply cursor-pointer mx-3 relative;
-  
+
   .iconfont {
     @apply text-2xl transition;
     @apply hover:text-green-500;
   }
-  
+
   .active-indicator {
     @apply absolute -top-1 -right-1 flex;
-    
-    .timer-badge, .speed-badge {
+
+    .timer-badge,
+    .speed-badge {
       @apply flex items-center justify-center text-xs bg-green-500 text-white rounded-full;
       height: 16px;
       min-width: 16px;
       padding: 0 3px;
       font-weight: 600;
       font-size: 10px;
-      
+
       i {
         font-size: 10px;
       }
     }
-    
+
     .timer-badge + .speed-badge {
       @apply -ml-2 z-10;
     }
@@ -282,4 +304,4 @@ const selectSpeed = (speed: number) => {
     @apply text-2xl;
   }
 }
-</style> 
+</style>

src/renderer/components/player/MiniPlayBar.vue

@@ -52,7 +52,13 @@
           ></i>
         </div>
 
-        <n-popover v-if="component" trigger="hover" :z-index="99999999" placement="top" :show-arrow="false">
+        <n-popover
+          v-if="component"
+          trigger="hover"
+          :z-index="99999999"
+          placement="top"
+          :show-arrow="false"
+        >
           <template #trigger>
             <div class="function-button" @click="mute" @wheel.prevent="handleVolumeWheel">
               <i class="iconfont" :class="getVolumeIcon"></i>
@@ -196,16 +202,16 @@ const handleVolumeWheel = (e: WheelEvent) => {
 const isFavorite = computed(() => {
   // 对于B站视频，使用ID匹配函数
   if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
-    return playerStore.favoriteList.some(id => isBilibiliIdMatch(id, playMusic.value.id));
+    return playerStore.favoriteList.some((id) => isBilibiliIdMatch(id, playMusic.value.id));
   }
-  
+
   // 非B站视频直接比较ID
   return playerStore.favoriteList.includes(playMusic.value.id);
 });
 
 const toggleFavorite = async (e: Event) => {
   e.stopPropagation();
-  
+
   // 处理B站视频的收藏ID
   let favoriteId = playMusic.value.id;
   if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
@@ -538,7 +544,7 @@ const setMusicFull = () => {
 .volume-slider-wrapper {
   @apply p-2 py-4 rounded-xl bg-white dark:bg-dark-100 shadow-lg bg-opacity-90 backdrop-blur;
   height: 160px;
-  
+
   :deep(.n-slider) {
     --n-rail-height: 4px;
     --n-rail-color: theme('colors.gray.200');
@@ -642,7 +648,7 @@ const setMusicFull = () => {
   }
 }
 
-:deep(.n-popover){
+:deep(.n-popover) {
   background-color: transparent !important;
 }
 </style>

src/renderer/components/player/MobilePlayBar.vue

@@ -112,8 +112,8 @@
 import { useThrottleFn } from '@vueuse/core';
 import { computed, ref, watch } from 'vue';
 
-import { allTime, artistList, nowTime, playMusic, sound, textColors } from '@/hooks/MusicHook';
 import MusicFullWrapper from '@/components/lyric/MusicFullWrapper.vue';
+import { allTime, artistList, nowTime, playMusic, sound, textColors } from '@/hooks/MusicHook';
 import { usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
 import { getImgUrl, secondToMinute, setAnimationClass } from '@/utils';

src/renderer/components/player/PlayBar.vue

@@ -60,9 +60,7 @@
         <n-ellipsis class="text-ellipsis" line-clamp="1">
           {{ playMusic.name }}
         </n-ellipsis>
-        <span v-if="playbackRate !== 1.0" class="playback-rate-badge">
-            {{ playbackRate }}x
-        </span>
+        <span v-if="playbackRate !== 1.0" class="playback-rate-badge"> {{ playbackRate }}x </span>
       </div>
       <div class="music-content-name">
         <n-ellipsis
@@ -137,13 +135,16 @@
         </template>
         {{ t('player.playBar.reparse') }}
       </n-tooltip>
-      
+
       <!-- 高级控制菜单按钮（整合了 EQ、定时关闭、播放速度） -->
       <advanced-controls-popover />
-      
+
       <n-tooltip trigger="hover" :z-index="9999999">
         <template #trigger>
-          <i class="iconfont icon-list text-2xl hover:text-green-500 transition-colors cursor-pointer" @click="openPlayListDrawer"></i>
+          <i
+            class="iconfont icon-list text-2xl hover:text-green-500 transition-colors cursor-pointer"
+            @click="openPlayListDrawer"
+          ></i>
         </template>
         {{ t('player.playBar.playList') }}
       </n-tooltip>
@@ -156,8 +157,12 @@
 <script lang="ts" setup>
 import { useThrottleFn } from '@vueuse/core';
 import { useMessage } from 'naive-ui';
+import { storeToRefs } from 'pinia';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+
+import MusicFullWrapper from '@/components/lyric/MusicFullWrapper.vue';
+import AdvancedControlsPopover from '@/components/player/AdvancedControlsPopover.vue';
 import ReparsePopover from '@/components/player/ReparsePopover.vue';
 import {
   allTime,
@@ -169,16 +174,10 @@ import {
   textColors
 } from '@/hooks/MusicHook';
 import { useArtist } from '@/hooks/useArtist';
-import MusicFullWrapper from '@/components/lyric/MusicFullWrapper.vue';
 import { audioService } from '@/services/audioService';
-import { 
-  isBilibiliIdMatch, 
-  usePlayerStore
-} from '@/store/modules/player';
+import { isBilibiliIdMatch, usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
 import { getImgUrl, isElectron, isMobile, secondToMinute, setAnimationClass } from '@/utils';
-import AdvancedControlsPopover from '@/components/player/AdvancedControlsPopover.vue';
-import { storeToRefs } from 'pinia';
 
 const playerStore = usePlayerStore();
 const settingsStore = useSettingsStore();
@@ -313,7 +312,7 @@ const playModeText = computed(() => {
 });
 
 // 播放速度控制
-const {playbackRate} = storeToRefs(playerStore);
+const { playbackRate } = storeToRefs(playerStore);
 // 切换播放模式
 const togglePlayMode = () => {
   playerStore.togglePlayMode();
@@ -333,7 +332,7 @@ const showSliderTooltip = ref(false);
 // 播放暂停按钮事件
 const playMusicEvent = async () => {
   try {
-    const result = await playerStore.setPlay({ ...playMusic.value});
+    const result = await playerStore.setPlay({ ...playMusic.value });
     if (result) {
       playerStore.setPlayMusic(true);
     }
@@ -348,7 +347,7 @@ const musicFullVisible = computed({
   set: (value) => {
     playerStore.setMusicFull(value);
   }
-})
+});
 
 // 设置musicFull
 const setMusicFull = () => {
@@ -362,9 +361,9 @@ const setMusicFull = () => {
 const isFavorite = computed(() => {
   // 对于B站视频，使用ID匹配函数
   if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
-    return playerStore.favoriteList.some(id => isBilibiliIdMatch(id, playMusic.value.id));
+    return playerStore.favoriteList.some((id) => isBilibiliIdMatch(id, playMusic.value.id));
   }
-  
+
   // 非B站视频直接比较ID
   return playerStore.favoriteList.includes(playMusic.value.id);
 });
@@ -372,7 +371,7 @@ const isFavorite = computed(() => {
 const toggleFavorite = async (e: Event) => {
   console.log('playMusic.value', playMusic.value);
   e.stopPropagation();
-  
+
   // 处理B站视频的收藏ID
   let favoriteId = playMusic.value.id;
   if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
@@ -381,7 +380,7 @@ const toggleFavorite = async (e: Event) => {
       favoriteId = `${playMusic.value.bilibiliData.bvid}--${playMusic.value.song?.ar?.[0]?.id || 0}--${playMusic.value.bilibiliData.cid}`;
     }
   }
-  
+
   if (isFavorite.value) {
     playerStore.removeFromFavorite(favoriteId);
   } else {
@@ -490,7 +489,7 @@ const openPlayListDrawer = () => {
     @apply absolute opacity-0 invisible transition-all duration-300 bottom-[30px] left-1/2 -translate-x-1/2 h-[180px] px-2 py-4 rounded-xl;
     @apply bg-light dark:bg-dark-200;
     @apply border border-gray-200 dark:border-gray-700;
-    
+
     .volume-percentage {
       @apply absolute -top-6 left-1/2 -translate-x-1/2 text-xs font-medium bg-light dark:bg-dark-200 px-2 py-1 rounded-md;
       @apply border border-gray-200 dark:border-gray-700;
@@ -728,7 +727,6 @@ const openPlayListDrawer = () => {
   background: var(--hover-color-dark);
 }
 
-
 .playback-rate-badge {
   @apply ml-2 px-1.5 h-4 flex items-center text-xs rounded bg-green-500 bg-opacity-15 text-green-600 dark:text-green-400;
   font-weight: 500;

src/renderer/components/player/PlayingListDrawer.vue

@@ -1,15 +1,20 @@
 <template>
   <!-- 透明遮罩层，点击任意位置关闭 -->
   <div v-if="internalVisible" class="fixed-overlay" @click="closePanel"></div>
-  
+
   <!-- 使用animate.css进行动画效果 -->
-  <div 
-    v-if="internalVisible" 
+  <div
+    v-if="internalVisible"
     class="playlist-panel"
     :class="[
       'animate__animated',
-      closing ? (isMobile ? 'animate__slideOutDown' : 'animate__slideOutRight') : 
-               (isMobile ? 'animate__slideInUp' : 'animate__slideInRight')
+      closing
+        ? isMobile
+          ? 'animate__slideOutDown'
+          : 'animate__slideOutRight'
+        : isMobile
+          ? 'animate__slideInUp'
+          : 'animate__slideInRight'
     ]"
   >
     <div class="playlist-panel-header">
@@ -21,7 +26,7 @@
               <i class="iconfont ri-delete-bin-line"></i>
             </div>
           </template>
-          {{ t('player.playList.clearAll')}}
+          {{ t('player.playList.clearAll') }}
         </n-tooltip>
         <div class="close-btn" @click="closePanel">
           <i class="iconfont ri-close-line"></i>
@@ -31,7 +36,7 @@
     <div class="playlist-panel-content">
       <div v-if="playList.length === 0" class="empty-playlist">
         <i class="iconfont ri-music-2-line"></i>
-        <p>{{ t('player.playList.empty')}}</p>
+        <p>{{ t('player.playList.empty') }}</p>
       </div>
       <n-virtual-list v-else ref="playListRef" :item-size="62" item-resizable :items="playList">
         <template #default="{ item }">
@@ -52,9 +57,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
+import { useDialog, useMessage } from 'naive-ui';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useMessage, useDialog } from 'naive-ui';
+
 import SongItem from '@/components/common/SongItem.vue';
 import { usePlayerStore } from '@/store/modules/player';
 import type { SongResult } from '@/type/music';
@@ -78,27 +84,31 @@ const show = computed({
 });
 
 // 监听外部可见性变化
-watch(show, (newValue) => {
-  if (newValue) {
-    // 打开面板
-    internalVisible.value = true;
-    closing.value = false;
-    // 在下一个渲染周期后滚动到当前歌曲
-    nextTick(() => {
-      scrollToCurrentSong();
-    });
-  } else {
-    // 如果已经是关闭状态，不需要处理
-    if (!internalVisible.value) return;
-    
-    // 开始关闭动画
-    closing.value = true;
-    // 等待动画完成后再隐藏组件
-    setTimeout(() => {
-      internalVisible.value = false;
-    }, 400); // 动画持续时间
-  }
-}, { immediate: true });
+watch(
+  show,
+  (newValue) => {
+    if (newValue) {
+      // 打开面板
+      internalVisible.value = true;
+      closing.value = false;
+      // 在下一个渲染周期后滚动到当前歌曲
+      nextTick(() => {
+        scrollToCurrentSong();
+      });
+    } else {
+      // 如果已经是关闭状态，不需要处理
+      if (!internalVisible.value) return;
+
+      // 开始关闭动画
+      closing.value = true;
+      // 等待动画完成后再隐藏组件
+      setTimeout(() => {
+        internalVisible.value = false;
+      }, 400); // 动画持续时间
+    }
+  },
+  { immediate: true }
+);
 
 // 播放列表
 const playList = computed(() => playerStore.playList as SongResult[]);
@@ -118,10 +128,10 @@ const handleClearPlaylist = () => {
     return;
   }
 
-  if(isMobile.value){
+  if (isMobile.value) {
     closePanel();
   }
-  
+
   dialog.warning({
     title: t('player.playList.clearConfirmTitle'),
     content: t('player.playList.clearConfirmContent'),
@@ -159,12 +169,12 @@ const scrollToCurrentSong = () => {
     if (playListRef.value && playList.value.length > 0) {
       const index = playerStore.playListIndex;
       console.log('滚动到歌曲索引:', index);
-      playListRef.value.scrollTo({ 
-        top: (index > 3 ? (index - 3) : 0) * 62,
+      playListRef.value.scrollTo({
+        top: (index > 3 ? index - 3 : 0) * 62
       });
     }
   }, 100);
-};  
+};
 
 // 删除歌曲
 const handleDeleteSong = (song: SongResult) => {
@@ -185,36 +195,36 @@ const handleDeleteSong = (song: SongResult) => {
   height: 70vh;
   top: 15vh; // 距离顶部15%
   animation-duration: 0.4s !important; // 动画持续时间
-  
+
   @apply bg-light dark:bg-dark shadow-2xl dark:border dark:border-gray-700;
-  
+
   &-header {
     @apply flex items-center justify-between px-4 py-2 border-b border-gray-100 dark:border-gray-900;
     backdrop-filter: blur(10px);
     background-color: rgba(255, 255, 255, 0.7);
-    
+
     .dark & {
       background-color: rgba(18, 18, 18, 0.7);
     }
-    
+
     .title {
       @apply text-base font-medium text-gray-800 dark:text-gray-200;
     }
-    
+
     .header-actions {
       @apply flex items-center;
     }
-    
+
     .action-btn,
     .close-btn {
       @apply w-8 h-8 flex items-center justify-center rounded-full cursor-pointer mx-1 text-gray-800 dark:text-gray-200;
       @apply hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors;
-      
+
       .iconfont {
         @apply text-xl;
       }
     }
-    
+
     .action-btn {
       @apply text-gray-500 dark:text-gray-400;
       &:hover {
@@ -222,7 +232,7 @@ const handleDeleteSong = (song: SongResult) => {
       }
     }
   }
-  
+
   &-content {
     @apply h-[calc(70vh-60px)] overflow-hidden;
   }
@@ -230,11 +240,11 @@ const handleDeleteSong = (song: SongResult) => {
 
 .empty-playlist {
   @apply flex flex-col items-center justify-center h-full text-gray-400 dark:text-gray-500;
-  
+
   .iconfont {
     @apply text-5xl mb-4;
   }
-  
+
   p {
     @apply text-sm;
   }
@@ -267,10 +277,10 @@ const handleDeleteSong = (song: SongResult) => {
     border-left: none;
     border-top: 1px solid theme('colors.gray.200');
     box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
-    
+
     &-header {
       @apply text-center relative px-4;
-      
+
       &::before {
         content: '';
         position: absolute;
@@ -283,14 +293,14 @@ const handleDeleteSong = (song: SongResult) => {
         background-color: rgba(150, 150, 150, 0.3);
       }
     }
-    
+
     &-content {
       height: calc(80vh - 60px);
       @apply px-4;
-      .delete-btn{
+      .delete-btn {
         @apply visible;
       }
     }
   }
 }
-</style> 
+</style>

src/renderer/components/player/ReparsePopover.vue

@@ -11,9 +11,9 @@
     <template #trigger>
       <n-tooltip trigger="hover" :z-index="9999999">
         <template #trigger>
-          <i 
+          <i
             class="iconfont ri-refresh-line"
-            :class="{ 'text-green-500': isReparse, 'animate-spin': isReparsing }" 
+            :class="{ 'text-green-500': isReparse, 'animate-spin': isReparsing }"
           ></i>
         </template>
         {{ t('player.playBar.reparse') }}
@@ -24,11 +24,11 @@
       <div class="text-sm opacity-70 mb-3">{{ t('player.reparse.desc') }}</div>
       <div class="mb-3">
         <div class="flex flex-col space-y-2">
-          <div 
-            v-for="source in musicSourceOptions" 
+          <div
+            v-for="source in musicSourceOptions"
             :key="source.value"
             class="source-button flex items-center p-2 rounded-lg cursor-pointer transition-all duration-200 bg-light-200 dark:bg-dark-200 hover:bg-light-300 dark:hover:bg-dark-300"
-            :class="{ 
+            :class="{
               'bg-green-50 dark:bg-green-900/20 text-green-500': isCurrentSource(source.value),
               'opacity-50 cursor-not-allowed': isReparsing || playMusic.source === 'bilibili'
             }"
@@ -40,10 +40,16 @@
             <div class="flex-1 text-sm whitespace-nowrap overflow-hidden text-ellipsis">
               {{ source.label }}
             </div>
-            <div v-if="isReparsing && currentReparsingSource === source.value" class="w-5 h-5 flex items-center justify-center">
+            <div
+              v-if="isReparsing && currentReparsingSource === source.value"
+              class="w-5 h-5 flex items-center justify-center"
+            >
               <i class="ri-loader-4-line animate-spin"></i>
             </div>
-            <div v-else-if="isCurrentSource(source.value)" class="w-5 h-5 flex items-center justify-center">
+            <div
+              v-else-if="isCurrentSource(source.value)"
+              class="w-5 h-5 flex items-center justify-center"
+            >
               <i class="ri-check-line"></i>
             </div>
           </div>
@@ -53,7 +59,10 @@
         {{ t('player.reparse.bilibiliNotSupported') }}
       </div>
       <!-- 清除自定义音源 -->
-      <div class="text-red-500 text-sm flex items-center bg-light-200 dark:bg-dark-200 rounded-lg p-2 cursor-pointer"  @click="clearCustomSource">
+      <div
+        class="text-red-500 text-sm flex items-center bg-light-200 dark:bg-dark-200 rounded-lg p-2 cursor-pointer"
+        @click="clearCustomSource"
+      >
         <div class="flex items-center justify-center w-6 h-6 mr-3 text-lg">
           <i class="ri-close-circle-line"></i>
         </div>
@@ -66,13 +75,14 @@
 </template>
 
 <script lang="ts" setup>
+import { useMessage } from 'naive-ui';
 import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useMessage } from 'naive-ui';
+
 import { playMusic } from '@/hooks/MusicHook';
+import { audioService } from '@/services/audioService';
 import { usePlayerStore } from '@/store/modules/player';
 import type { Platform } from '@/types/music';
-import { audioService } from '@/services/audioService';
 
 const playerStore = usePlayerStore();
 const { t } = useI18n();
@@ -104,13 +114,13 @@ const isCurrentSource = (source: Platform) => {
 // 获取音源图标
 const getSourceIcon = (source: Platform) => {
   const iconMap: Record<Platform, string> = {
-    'migu': 'ri-music-2-fill',
-    'kugou': 'ri-music-fill',
-    'qq': 'ri-qq-fill',
-    'joox': 'ri-disc-fill',
-    'pyncmd': 'ri-netease-cloud-music-fill',
-    'bilibili': 'ri-bilibili-fill',
-    'gdmusic': 'ri-google-fill'
+    migu: 'ri-music-2-fill',
+    kugou: 'ri-music-fill',
+    qq: 'ri-qq-fill',
+    joox: 'ri-disc-fill',
+    pyncmd: 'ri-netease-cloud-music-fill',
+    bilibili: 'ri-bilibili-fill',
+    gdmusic: 'ri-google-fill'
   };
 
   return iconMap[source] || 'ri-music-2-fill';
@@ -120,11 +130,12 @@ const getSourceIcon = (source: Platform) => {
 const initSelectedSources = () => {
   const songId = String(playMusic.value.id);
   const savedSource = localStorage.getItem(`song_source_${songId}`);
-  
+
   if (savedSource) {
     try {
       selectedSourcesValue.value = JSON.parse(savedSource);
     } catch (e) {
+      console.error('解析保存的音源设置失败:', e);
       selectedSourcesValue.value = [];
     }
   } else {
@@ -144,20 +155,20 @@ const directReparseMusic = async (source: Platform) => {
   if (isReparsing.value || playMusic.value.source === 'bilibili') {
     return;
   }
-  
+
   try {
     isReparsing.value = true;
     currentReparsingSource.value = source;
-    
+
     // 更新选中的音源值为当前点击的音源
     const songId = String(playMusic.value.id);
     selectedSourcesValue.value = [source];
-    
+
     // 保存到localStorage
     localStorage.setItem(`song_source_${songId}`, JSON.stringify(selectedSourcesValue.value));
-    
+
     const success = await playerStore.reparseCurrentSong(source);
-    
+
     if (success) {
       message.success(t('player.reparse.success'));
     } else {
@@ -173,48 +184,55 @@ const directReparseMusic = async (source: Platform) => {
 };
 
 // 监听歌曲ID变化，初始化音源设置
-watch(() => playMusic.value.id, () => {
-  if (playMusic.value.id) {
-    initSelectedSources();
-  }
-}, { immediate: true });
+watch(
+  () => playMusic.value.id,
+  () => {
+    if (playMusic.value.id) {
+      initSelectedSources();
+    }
+  },
+  { immediate: true }
+);
 
 // 监听歌曲变化，检查是否有自定义音源
-watch(() => playMusic.value.id, async (newId) => {
-  if (newId) {
-    const songId = String(newId);
-    const savedSource = localStorage.getItem(`song_source_${songId}`);
-    
-    // 如果有保存的音源设置但当前不是使用自定义解析的播放，尝试应用
-    if (savedSource && playMusic.value.source !== 'bilibili') {
-      try {
-        const sources = JSON.parse(savedSource) as Platform[];
-        console.log(`检测到歌曲ID ${songId} 有自定义音源设置:`, sources);
-        
-        // 当URL加载失败或过期时，自动应用自定义音源重新加载
-        audioService.on('url_expired', async (trackInfo) => {
-          if (trackInfo && trackInfo.id === playMusic.value.id) {
-            console.log('URL已过期，自动应用自定义音源重新加载');
-            try {
-              isReparsing.value = true;
-              const success = await playerStore.reparseCurrentSong(sources[0]);
-              if (!success) {
+watch(
+  () => playMusic.value.id,
+  async (newId) => {
+    if (newId) {
+      const songId = String(newId);
+      const savedSource = localStorage.getItem(`song_source_${songId}`);
+
+      // 如果有保存的音源设置但当前不是使用自定义解析的播放，尝试应用
+      if (savedSource && playMusic.value.source !== 'bilibili') {
+        try {
+          const sources = JSON.parse(savedSource) as Platform[];
+          console.log(`检测到歌曲ID ${songId} 有自定义音源设置:`, sources);
+
+          // 当URL加载失败或过期时，自动应用自定义音源重新加载
+          audioService.on('url_expired', async (trackInfo) => {
+            if (trackInfo && trackInfo.id === playMusic.value.id) {
+              console.log('URL已过期，自动应用自定义音源重新加载');
+              try {
+                isReparsing.value = true;
+                const success = await playerStore.reparseCurrentSong(sources[0]);
+                if (!success) {
+                  message.error(t('player.reparse.failed'));
+                }
+              } catch (e) {
+                console.error('自动重新解析失败:', e);
                 message.error(t('player.reparse.failed'));
+              } finally {
+                isReparsing.value = false;
               }
-            } catch (e) {
-              console.error('自动重新解析失败:', e);
-              message.error(t('player.reparse.failed'));
-            } finally {
-              isReparsing.value = false;
             }
-          }
-        });
-      } catch (e) {
-        console.error('解析保存的音源设置失败:', e);
+          });
+        } catch (e) {
+          console.error('解析保存的音源设置失败:', e);
+        }
       }
     }
   }
-});
+);
 </script>
 
 <style lang="scss" scoped>
@@ -223,8 +241,12 @@ watch(() => playMusic.value.id, async (newId) => {
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .animate-spin {
@@ -240,4 +262,4 @@ watch(() => playMusic.value.id, async (newId) => {
 .iconfont {
   @apply text-2xl mx-3;
 }
-</style>
+</style>

src/renderer/components/player/SimplePlayBar.vue

@@ -8,14 +8,14 @@
           <div class="progress-track"></div>
           <div class="progress-fill" :style="{ width: `${(nowTime / allTime) * 100}%` }"></div>
         </div>
-        
+
         <!-- 时间显示 -->
         <div class="time-display">
           <span class="current-time">{{ formatTime(nowTime) }}</span>
           <span class="total-time">{{ formatTime(allTime) }}</span>
         </div>
       </div>
-      
+
       <!-- 主控制区域 -->
       <div class="controls-section">
         <div class="left-controls">
@@ -23,24 +23,24 @@
             <i class="iconfont" :class="playModeIcon"></i>
           </button>
         </div>
-        
+
         <div class="center-controls">
           <!-- 上一首 -->
           <button class="control-btn" @click="handlePrev">
             <i class="iconfont icon-prev"></i>
           </button>
-          
+
           <!-- 播放/暂停 -->
           <button class="control-btn play-btn" @click="playMusicEvent">
             <i class="iconfont" :class="play ? 'icon-stop' : 'icon-play'"></i>
           </button>
-          
+
           <!-- 下一首 -->
           <button class="control-btn" @click="handleNext">
             <i class="iconfont icon-next"></i>
           </button>
         </div>
-        
+
         <div class="right-controls">
           <!-- 播放列表按钮 -->
           <button class="control-btn small-btn" @click="openPlayListDrawer">
@@ -48,7 +48,7 @@
           </button>
         </div>
       </div>
-      
+
       <!-- 底部控制区域 -->
       <div class="bottom-section">
         <div class="spacer"></div>
@@ -56,9 +56,9 @@
         <div class="volume-control">
           <i class="iconfont" :class="getVolumeIcon" @click="mute"></i>
           <div class="volume-slider">
-            <n-slider 
-              v-model:value="volumeSlider" 
-              :step="1" 
+            <n-slider
+              v-model:value="volumeSlider"
+              :step="1"
               :tooltip="false"
               @wheel.prevent="handleVolumeWheel"
             ></n-slider>
@@ -70,18 +70,22 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, watch } from 'vue';
-import { secondToMinute } from '@/utils';
+import { computed, onMounted, ref, watch } from 'vue';
+
 import { allTime, nowTime, playMusic } from '@/hooks/MusicHook';
 import { audioService } from '@/services/audioService';
 import { usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
+import { secondToMinute } from '@/utils';
 
-const props = withDefaults(defineProps<{
-  isDark: boolean;
-}>(), {
-  isDark: false
-});
+const props = withDefaults(
+  defineProps<{
+    isDark: boolean;
+  }>(),
+  {
+    isDark: false
+  }
+);
 
 const playerStore = usePlayerStore();
 const settingsStore = useSettingsStore();
@@ -184,27 +188,28 @@ const isDarkMode = computed(() => settingsStore.theme === 'dark' || props.isDark
 // 主题颜色应用函数
 const applyThemeColor = (colorValue: string) => {
   if (!colorValue || !playBarRef.value) return;
-  
+
   console.log('应用主题色:', colorValue);
   const playBarElement = playBarRef.value;
-  
+
   // 解析RGB值
   const rgbMatch = colorValue.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
-  
+
   if (rgbMatch) {
     const [_, r, g, b] = rgbMatch.map(Number);
-    
+
     // 计算颜色亮度 (0-255)
     // 使用加权平均值公式: 0.299*R + 0.587*G + 0.114*B
     const brightness = Math.round(0.299 * r + 0.587 * g + 0.114 * b);
-    
+
     console.log(`主题色亮度: ${brightness}/255`);
-    
+
     // 设置主色
     playBarElement.style.setProperty('--fill-color', colorValue);
-    
+
     // 亮度自适应处理
-    if (brightness > 200) { // 非常亮的颜色
+    if (brightness > 200) {
+      // 非常亮的颜色
       // 深化主色以增加对比度
       const darkenedColor = `rgb(${Math.max(0, r - 60)}, ${Math.max(0, g - 60)}, ${Math.max(0, b - 60)})`;
       playBarElement.style.setProperty('--fill-color-alt', darkenedColor);
@@ -213,7 +218,8 @@ const applyThemeColor = (colorValue: string) => {
       playBarElement.style.setProperty('--high-contrast-color', '#000000'); // 高对比度颜色
       playBarElement.classList.add('light-theme-color');
       playBarElement.classList.remove('dark-theme-color');
-    } else if (brightness < 50) { // 非常暗的颜色
+    } else if (brightness < 50) {
+      // 非常暗的颜色
       // 提亮主色以增加可见性
       const lightenedColor = `rgb(${Math.min(255, r + 60)}, ${Math.min(255, g + 60)}, ${Math.min(255, b + 60)})`;
       playBarElement.style.setProperty('--fill-color-alt', lightenedColor);
@@ -234,7 +240,7 @@ const applyThemeColor = (colorValue: string) => {
       playBarElement.classList.remove('light-theme-color');
       playBarElement.classList.remove('dark-theme-color');
     }
-    
+
     // 设置亮色（用于高亮效果）
     const lightenedColor = `rgb(${Math.min(255, r + 40)}, ${Math.min(255, g + 40)}, ${Math.min(255, b + 40)})`;
     playBarElement.style.setProperty('--fill-color-light', lightenedColor);
@@ -250,11 +256,14 @@ const applyThemeColor = (colorValue: string) => {
 };
 
 // 监听主题色变化
-watch(() => playerStore.playMusic.primaryColor, (newVal) => {
-  if (newVal) {
-    applyThemeColor(newVal);
+watch(
+  () => playerStore.playMusic.primaryColor,
+  (newVal) => {
+    if (newVal) {
+      applyThemeColor(newVal);
+    }
   }
-});
+);
 
 onMounted(() => {
   if (playerStore.playMusic?.primaryColor) {
@@ -270,11 +279,11 @@ onMounted(() => {
   @apply w-full;
   border-radius: 12px;
   transition: all 0.3s ease;
-  
+
   /* 默认变量 */
   --text-on-fill: #ffffff;
   --high-contrast-color: #ffffff;
-  
+
   &.dark-theme {
     --text-color: #333333;
     --muted-color: rgba(0, 0, 0, 0.6);
@@ -287,7 +296,7 @@ onMounted(() => {
     --button-bg: rgba(0, 0, 0, 0.1);
     --button-hover: rgba(0, 0, 0, 0.2);
   }
-  
+
   &:not(.dark-theme) {
     --text-color: #f1f1f1;
     --muted-color: rgba(255, 255, 255, 0.6);
@@ -300,37 +309,45 @@ onMounted(() => {
     --button-bg: rgba(255, 255, 255, 0.05);
     --button-hover: rgba(255, 255, 255, 0.1);
   }
-  
+
   /* 极亮主题色适配 */
   &.light-theme-color {
     .progress-fill {
-      box-shadow: 0 0 8px var(--fill-color-transparent), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+      box-shadow:
+        0 0 8px var(--fill-color-transparent),
+        inset 0 0 0 1px rgba(0, 0, 0, 0.1);
     }
-    
+
     .control-btn.play-btn {
-      box-shadow: 0 3px 8px var(--fill-color-transparent), 0 1px 2px rgba(0, 0, 0, 0.3);
+      box-shadow:
+        0 3px 8px var(--fill-color-transparent),
+        0 1px 2px rgba(0, 0, 0, 0.3);
       color: var(--text-on-fill);
     }
-    
+
     .volume-control .iconfont:hover {
       color: var(--fill-color-alt);
     }
   }
-  
+
   /* 极暗主题色适配 */
   &.dark-theme-color {
     .progress-fill {
-      box-shadow: 0 0 10px var(--fill-color-transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
+      box-shadow:
+        0 0 10px var(--fill-color-transparent),
+        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
     }
-    
+
     .control-btn.play-btn {
-      box-shadow: 0 3px 12px var(--fill-color-transparent), 0 0 0 1px rgba(255, 255, 255, 0.2);
-      
+      box-shadow:
+        0 3px 12px var(--fill-color-transparent),
+        0 0 0 1px rgba(255, 255, 255, 0.2);
+
       .iconfont {
-        text-shadow: 0 1px 3px rgba(0,0,0,0.5);
+        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
       }
     }
-    
+
     .volume-control .iconfont:hover {
       color: var(--fill-color-light);
     }
@@ -343,47 +360,48 @@ onMounted(() => {
 
 .top-section {
   @apply mb-3;
-  
+
   .progress-bar {
     @apply relative cursor-pointer h-2 mb-2 w-full;
-    
+
     .progress-track {
       @apply absolute inset-0 rounded-full transition-all duration-150;
       background-color: var(--track-color);
     }
-    
+
     .progress-fill {
       @apply absolute top-0 left-0 h-full rounded-full transition-all duration-150;
       background: linear-gradient(90deg, var(--fill-color), var(--fill-color-light));
       box-shadow: 0 0 8px var(--fill-color-transparent);
     }
-    
+
     &:hover {
-      .progress-track{
+      .progress-track {
         background-color: var(--track-color-hover);
       }
-      .progress-track, .progress-fill {
+      .progress-track,
+      .progress-fill {
         @apply h-full;
       }
-      
+
       .progress-fill {
         box-shadow: 0 0 12px var(--fill-color-transparent);
       }
     }
   }
-  
+
   .time-display {
     @apply flex justify-between text-base;
     color: var(--muted-color);
-    
+
     .time-separator {
       @apply mx-1;
     }
-    
+
     .current-time {
       opacity: 0.8;
       transition: opacity 0.3s ease;
-      
+
       &:hover {
         opacity: 1;
       }
@@ -393,11 +411,12 @@ onMounted(() => {
 
 .controls-section {
   @apply flex items-center justify-between mb-4;
-  
-  .left-controls, .right-controls {
+
+  .left-controls,
+  .right-controls {
     @apply flex items-center;
   }
-  
+
   .center-controls {
     @apply flex items-center justify-center space-x-6;
   }
@@ -414,39 +433,39 @@ onMounted(() => {
   width: 32px;
   height: 32px;
   cursor: pointer;
-  
+
   &:hover {
     background-color: var(--button-bg);
     transform: scale(1.05);
   }
-  
+
   &:active {
     background-color: var(--button-hover);
     transform: scale(0.95);
   }
-  
+
   &.play-btn {
     background: linear-gradient(145deg, var(--fill-color), var(--fill-color-alt));
     color: var(--text-on-fill);
     width: 46px;
     height: 46px;
     box-shadow: 0 3px 8px var(--fill-color-transparent);
-    
+
     &:hover {
       box-shadow: 0 4px 12px var(--fill-color-transparent);
     }
-    
+
     .iconfont {
       font-size: 1.25rem;
     }
   }
-  
+
   &.small-btn {
     @apply text-2xl;
     width: 28px;
     height: 28px;
   }
-  
+
   .iconfont {
     @apply text-2xl;
   }
@@ -455,42 +474,46 @@ onMounted(() => {
 .volume-control {
   @apply flex items-center space-x-2;
   color: var(--text-color);
-  
+
   .iconfont {
     @apply cursor-pointer text-base;
-    transition: transform 0.2s ease, color 0.2s ease;
-    
+    transition:
+      transform 0.2s ease,
+      color 0.2s ease;
+
     &:hover {
       transform: scale(1.1);
       color: var(--fill-color);
     }
   }
-  
+
   .volume-slider {
     @apply w-24;
-    
+
     :deep(.n-slider) {
       --n-rail-height: 3px;
       --n-fill-color: var(--fill-color);
       --n-rail-color: var(--track-color);
       --n-handle-size: 12px;
-      
+
       .n-slider-rail {
         @apply rounded-full;
       }
-      
+
       .n-slider-rail__fill {
         background: linear-gradient(90deg, var(--fill-color), var(--fill-color-light));
         box-shadow: 0 0 6px var(--fill-color-transparent);
       }
-      
+
       .n-slider-handle {
         @apply opacity-0 transition-opacity duration-200;
         background: white;
-        box-shadow: 0 0 6px var(--fill-color-transparent), 0 0 0 1px var(--high-contrast-color);
+        box-shadow:
+          0 0 6px var(--fill-color-transparent),
+          0 0 0 1px var(--high-contrast-color);
         border: 2px solid var(--fill-color);
       }
-      
+
       &:hover .n-slider-handle {
         @apply opacity-100;
       }
@@ -506,4 +529,4 @@ onMounted(() => {
   color: var(--fill-color);
   text-shadow: 0 0 8px var(--fill-color-transparent);
 }
-</style> 
+</style>

src/renderer/components/player/SleepTimer.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="sleep-timer-content">
     <h3 class="timer-title">{{ t('player.sleepTimer.title') }}</h3>
-    
+
     <div v-if="hasTimerActive" class="sleep-timer-active">
       <div class="timer-status">
         <template v-if="timerType === 'time'">
@@ -9,19 +9,21 @@
         </template>
         <template v-else-if="timerType === 'songs'">
           <div class="timer-value">{{ remainingSongs }}</div>
-          <div class="timer-label">{{ t('player.sleepTimer.songsRemaining', { count: remainingSongs }) }}</div>
+          <div class="timer-label">
+            {{ t('player.sleepTimer.songsRemaining', { count: remainingSongs }) }}
+          </div>
         </template>
         <template v-else-if="timerType === 'end'">
           <div class="timer-value">{{ t('player.sleepTimer.activeUntilEnd') }}</div>
           <div class="timer-label">{{ t('player.sleepTimer.afterPlaylist') }}</div>
         </template>
       </div>
-      
+
       <n-button type="error" class="cancel-timer-btn" @click="handleCancelTimer" round>
         {{ t('player.sleepTimer.cancel') }}
       </n-button>
     </div>
-    
+
     <div v-else class="sleep-timer-options">
       <!-- 按时间定时 -->
       <div class="option-section">
@@ -59,7 +61,7 @@
           </div>
         </div>
       </div>
-      
+
       <!-- 按歌曲数定时 -->
       <div class="option-section">
         <h4 class="option-title">{{ t('player.sleepTimer.songsMode') }}</h4>
@@ -96,7 +98,7 @@
           </div>
         </div>
       </div>
-      
+
       <!-- 播放完列表后关闭 -->
       <div class="option-section playlist-end-section">
         <n-button block class="playlist-end-btn" @click="handleSetPlaylistEndTimer" round>
@@ -108,9 +110,10 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, onMounted, onUnmounted, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
 import { usePlayerStore } from '@/store/modules/player';
 
 const { t } = useI18n();
@@ -163,22 +166,22 @@ function handleCancelTimer() {
 const formattedRemainingTime = computed(() => {
   // 依赖刷新触发器强制更新
   void refreshTrigger.value;
-  
+
   if (timerType.value !== 'time' || !sleepTimer.value.endTime) {
     return '00:00:00';
   }
-  
+
   const remaining = Math.max(0, sleepTimer.value.endTime - Date.now());
   const totalSeconds = Math.floor(remaining / 1000);
-  
+
   const hours = Math.floor(totalSeconds / 3600);
   const minutes = Math.floor((totalSeconds % 3600) / 60);
   const seconds = Math.floor(totalSeconds % 60);
-  
+
   const formattedHours = hours.toString().padStart(2, '0');
   const formattedMinutes = minutes.toString().padStart(2, '0');
   const formattedSeconds = seconds.toString().padStart(2, '0');
-  
+
   return `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
 });
 
@@ -190,10 +193,10 @@ onMounted(() => {
   if (hasTimerActive.value && timerType.value === 'time') {
     startTimerUpdate();
   }
-  
+
   // 监听定时器状态变化
   watch(
-    () => [hasTimerActive.value, timerType.value], 
+    () => [hasTimerActive.value, timerType.value],
     ([newHasTimer, newType]) => {
       if (newHasTimer && newType === 'time') {
         startTimerUpdate();
@@ -207,7 +210,7 @@ onMounted(() => {
 // 启动定时器更新UI
 function startTimerUpdate() {
   stopTimerUpdate(); // 先停止之前的计时器
-  
+
   // 每秒更新UI
   timerInterval = window.setInterval(() => {
     // 更新刷新触发器，强制重新计算
@@ -244,13 +247,15 @@ onUnmounted(() => {
     .timer-status {
       @apply flex flex-col items-center justify-center p-8 mb-5 w-full rounded-2xl dark:bg-gray-800 dark:bg-opacity-40 dark:shadow-gray-900/20;
       background-color: rgba(255, 255, 255, 0.5);
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.1);
+      box-shadow:
+        0 1px 3px rgba(0, 0, 0, 0.05),
+        0 0 0 1px rgba(255, 255, 255, 0.1);
       transition: all 0.3s ease;
 
       // 定时值显示
       .timer-value {
         @apply text-4xl font-semibold mb-2 text-green-500;
-        
+
         &.countdown-timer {
           font-variant-numeric: tabular-nums;
           letter-spacing: 2px;
@@ -266,11 +271,11 @@ onUnmounted(() => {
     // 取消按钮
     .cancel-timer-btn {
       @apply w-full py-3 text-base rounded-full transition-all duration-200;
-      
+
       &:hover {
         @apply transform scale-105 shadow-md;
       }
-      
+
       &:active {
         @apply transform scale-95;
       }
@@ -292,37 +297,44 @@ onUnmounted(() => {
       }
 
       // 时间/歌曲选项容器
-      .time-options, .songs-options {
+      .time-options,
+      .songs-options {
         @apply flex flex-wrap gap-2;
 
         // 选项按钮共享样式
-        .time-option-btn, .songs-option-btn {
+        .time-option-btn,
+        .songs-option-btn {
           @apply px-4 py-2 rounded-full text-gray-800 dark:text-gray-200 transition-all duration-200;
           background-color: rgba(255, 255, 255, 0.5);
           @apply dark:bg-gray-800 dark:bg-opacity-40 hover:bg-white dark:hover:bg-gray-700;
-          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(255, 255, 255, 0.1);
+          box-shadow:
+            0 1px 2px rgba(0, 0, 0, 0.05),
+            0 0 0 1px rgba(255, 255, 255, 0.1);
           @apply dark:shadow-gray-900/20;
-          
+
           &:hover {
             @apply transform scale-105 shadow-md;
           }
-          
+
           &:active {
             @apply transform scale-95;
           }
         }
 
         // 自定义输入区域
-        .custom-time, .custom-songs {
+        .custom-time,
+        .custom-songs {
           @apply flex items-center space-x-2 mt-4 w-full;
 
           // 输入框
-          .custom-time-input, .custom-songs-input {
+          .custom-time-input,
+          .custom-songs-input {
             @apply flex-1;
           }
 
           // 设置按钮
-          .custom-time-btn, .custom-songs-btn {
+          .custom-time-btn,
+          .custom-songs-btn {
             @apply py-2 px-4 rounded-full transition-all duration-200;
           }
         }
@@ -339,4 +351,4 @@ onUnmounted(() => {
     }
   }
 }
-</style> 
+</style>

src/renderer/components/player/SleepTimerTop.vue

@@ -9,8 +9,9 @@
 </template>
 
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+
 import { usePlayerStore } from '@/store/modules/player';
 
 const { t } = useI18n();
@@ -28,19 +29,18 @@ const checkTimerExpired = () => {
       playerStore.clearSleepTimer();
     }
   }
-}
+};
 
 // 在组件挂载时检查定时器状态
 onMounted(() => {
   checkTimerExpired();
 });
 
-
 // 倒计时显示
 const formattedRemainingTime = computed(() => {
   // 依赖刷新触发器强制更新
   void refreshTrigger.value;
-  
+
   if (sleepTimer.value.type !== 'time' || !sleepTimer.value.endTime) {
     if (sleepTimer.value.type === 'songs' && sleepTimer.value.remainingSongs) {
       return t('player.sleepTimer.songsRemaining', { count: sleepTimer.value.remainingSongs });
@@ -50,14 +50,14 @@ const formattedRemainingTime = computed(() => {
     }
     return '';
   }
-  
+
   const remaining = Math.max(0, sleepTimer.value.endTime - Date.now());
   const totalSeconds = Math.floor(remaining / 1000);
-  
+
   const hours = Math.floor(totalSeconds / 3600);
   const minutes = Math.floor((totalSeconds % 3600) / 60);
   const seconds = Math.floor(totalSeconds % 60);
-  
+
   if (hours > 0) {
     return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
   } else {
@@ -83,7 +83,7 @@ watch(
 // 启动定时器更新UI
 function startTimerUpdate() {
   stopTimerUpdate(); // 先停止之前的计时器
-  
+
   // 每秒更新UI
   timerUpdateInterval = window.setInterval(() => {
     // 更新刷新触发器，强制重新计算
@@ -110,16 +110,15 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-
 .sleep-timer-countdown {
   @apply fixed top-[28px] left-1/2 transform -translate-x-1/2 -translate-y-full py-1 px-3 rounded-b-lg bg-green-500 text-white text-sm flex items-center hover:scale-110 transition-all cursor-pointer;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
   z-index: 9998;
   min-width: 80px;
   text-align: center;
   animation: fadeInDown 0.3s ease-out;
   -webkit-app-region: no-drag;
-  
+
   @keyframes fadeInDown {
     from {
       transform: translate(-50%, -150%);
@@ -130,11 +129,11 @@ onUnmounted(() => {
       opacity: 1;
     }
   }
-  
+
   span {
     font-variant-numeric: tabular-nums;
     letter-spacing: 0.5px;
     font-weight: 500;
   }
 }
-</style>
+</style>