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

src/renderer/App.vue

@@ -19,17 +19,16 @@ import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
 import TrafficWarningDrawer from '@/components/TrafficWarningDrawer.vue';
-
 import homeRouter from '@/router/home';
 import { useMenuStore } from '@/store/modules/menu';
 import { usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
 import { isElectron, isLyricWindow } from '@/utils';
 
-import { initAudioListeners } from './hooks/MusicHook';
+import { initAudioListeners, initMusicHook } from './hooks/MusicHook';
+import { audioService } from './services/audioService';
 import { isMobile } from './utils';
 import { useAppShortcuts } from './utils/appShortcuts';
-import { audioService } from './services/audioService';
 
 const { locale } = useI18n();
 const settingsStore = useSettingsStore();
@@ -114,6 +113,9 @@ onMounted(async () => {
   }
   // 先初始化播放状态
   await playerStore.initializePlayState();
+  // 初始化 MusicHook，注入 playerStore
+  initMusicHook(playerStore);
+
   // 如果有正在播放的音乐，则初始化音频监听器
   if (playerStore.playMusic && playerStore.playMusic.id) {
     // 使用 nextTick 确保 DOM 更新后再初始化

src/renderer/api/bilibili.ts

@@ -153,11 +153,8 @@ export const getBilibiliAudioUrl = async (bvid: string, cid: number): Promise<st
   }
 };
 
-
 // 根据音乐名称搜索并直接返回音频URL
-export const searchAndGetBilibiliAudioUrl = async (
-  keyword: string
-): Promise<string> => {
+export const searchAndGetBilibiliAudioUrl = async (keyword: string): Promise<string> => {
   try {
     // 搜索B站视频，取第一页第一个结果
     const res = await searchBilibili({ keyword, page: 1, pagesize: 1 });
@@ -180,4 +177,4 @@ export const searchAndGetBilibiliAudioUrl = async (
     console.error('根据名称搜索B站音频URL失败:', error);
     throw error;
   }
-}
+};

src/renderer/api/gdmusic.ts

@@ -1,4 +1,5 @@
 import axios from 'axios';
+
 import type { MusicSourceType } from '@/type/music';
 
 /**
@@ -19,8 +20,8 @@ export interface ParsedMusicResult {
     params: {
       id: number;
       type: string;
-    }
-  }
+    };
+  };
 }
 
 /**
@@ -32,8 +33,8 @@ export interface ParsedMusicResult {
  * @returns 解析后的音乐URL及相关信息
  */
 export const parseFromGDMusic = async (
-  id: number, 
-  data: any, 
+  id: number,
+  data: any,
   quality: string = '999',
   timeout: number = 15000
 ): Promise<ParsedMusicResult | null> => {
@@ -53,32 +54,31 @@ export const parseFromGDMusic = async (
           console.error('GD音乐台解析：歌曲数据为空');
           throw new Error('歌曲数据为空');
         }
-        
+
         const songName = data.name || '';
         let artistNames = '';
-        
+
         // 处理不同的艺术家字段结构
         if (data.artists && Array.isArray(data.artists)) {
-          artistNames = data.artists.map(artist => artist.name).join(' ');
+          artistNames = data.artists.map((artist) => artist.name).join(' ');
         } else if (data.ar && Array.isArray(data.ar)) {
-          artistNames = data.ar.map(artist => artist.name).join(' ');
+          artistNames = data.ar.map((artist) => artist.name).join(' ');
         } else if (data.artist) {
           artistNames = typeof data.artist === 'string' ? data.artist : '';
         }
-        
+
         const searchQuery = `${songName} ${artistNames}`.trim();
-        
+
         if (!searchQuery || searchQuery.length < 2) {
           console.error('GD音乐台解析：搜索查询过短', { name: songName, artists: artistNames });
           throw new Error('搜索查询过短');
         }
-        
+
         // 所有可用的音乐源 netease、joox、tidal
-        const allSources = ['joox', 'tidal', 'netease'
-        ] as MusicSourceType[];
-        
+        const allSources = ['joox', 'tidal', 'netease'] as MusicSourceType[];
+
         console.log('GD音乐台开始搜索:', searchQuery);
-        
+
         // 依次尝试所有音源
         for (const source of allSources) {
           try {
@@ -109,7 +109,7 @@ export const parseFromGDMusic = async (
             continue;
           }
         }
-        
+
         console.log('GD音乐台所有音源均解析失败');
         return null;
       })(),
@@ -142,32 +142,32 @@ const baseUrl = 'https://music-api.gdstudio.xyz/api.php';
  * @returns 音乐URL结果
  */
 async function searchAndGetUrl(
-  source: MusicSourceType, 
-  searchQuery: string, 
+  source: MusicSourceType,
+  searchQuery: string,
   quality: string
 ): Promise<GDMusicUrlResult | null> {
   // 1. 搜索歌曲
   const searchUrl = `${baseUrl}?types=search&source=${source}&name=${encodeURIComponent(searchQuery)}&count=1&pages=1`;
   console.log(`GD音乐台尝试音源 ${source} 搜索:`, searchUrl);
-  
+
   const searchResponse = await axios.get(searchUrl, { timeout: 5000 });
-  
+
   if (searchResponse.data && Array.isArray(searchResponse.data) && searchResponse.data.length > 0) {
     const firstResult = searchResponse.data[0];
     if (!firstResult || !firstResult.id) {
       console.log(`GD音乐台 ${source} 搜索结果无效`);
       return null;
     }
-    
+
     const trackId = firstResult.id;
     const trackSource = firstResult.source || source;
-    
+
     // 2. 获取歌曲URL
     const songUrl = `${baseUrl}?types=url&source=${trackSource}&id=${trackId}&br=${quality}`;
     console.log(`GD音乐台尝试获取 ${trackSource} 歌曲URL:`, songUrl);
-    
+
     const songResponse = await axios.get(songUrl, { timeout: 5000 });
-    
+
     if (songResponse.data && songResponse.data.url) {
       return {
         url: songResponse.data.url,
@@ -183,4 +183,4 @@ async function searchAndGetUrl(
     console.log(`GD音乐台 ${source} 搜索结果为空`);
     return null;
   }
-} 
+}

src/renderer/api/music.ts

@@ -1,13 +1,15 @@
+import { cloneDeep } from 'lodash';
+
 import { musicDB } from '@/hooks/MusicHook';
 import { useSettingsStore, useUserStore } from '@/store';
 import type { ILyric } from '@/type/lyric';
+import type { SongResult } from '@/type/music';
 import { isElectron } from '@/utils';
 import request from '@/utils/request';
 import requestMusic from '@/utils/request_music';
-import { cloneDeep } from 'lodash';
-import { parseFromGDMusic } from './gdmusic';
-import type { SongResult } from '@/type/music';
+
 import { searchAndGetBilibiliAudioUrl } from './bilibili';
+import { parseFromGDMusic } from './gdmusic';
 
 const { addData, getData, deleteData } = musicDB;
 
@@ -89,12 +91,13 @@ export const getMusicLrc = async (id: number) => {
  */
 const getBilibiliAudio = async (data: SongResult) => {
   const songName = data?.name || '';
-  const artistName = Array.isArray(data?.ar) && data.ar.length > 0 && data.ar[0]?.name ? data.ar[0].name : '';
+  const artistName =
+    Array.isArray(data?.ar) && data.ar.length > 0 && data.ar[0]?.name ? data.ar[0].name : '';
   const albumName = data?.al && typeof data.al === 'object' && data.al?.name ? data.al.name : '';
-  
+
   const searchQuery = [songName, artistName, albumName].filter(Boolean).join(' ').trim();
   console.log('开始搜索bilibili音频:', searchQuery);
-  
+
   const url = await searchAndGetBilibiliAudioUrl(searchQuery);
   return {
     data: {
@@ -131,7 +134,7 @@ const getGDMusicAudio = async (id: number, data: SongResult) => {
  * @returns 解析结果
  */
 const getUnblockMusicAudio = (id: number, data: SongResult, sources: any[]) => {
-  const filteredSources = sources.filter(source => source !== 'gdmusic');
+  const filteredSources = sources.filter((source) => source !== 'gdmusic');
   console.log(`使用unblockMusic解析，音源:`, filteredSources);
   return window.api.unblockMusic(id, cloneDeep(data), cloneDeep(filteredSources));
 };
@@ -144,17 +147,17 @@ const getUnblockMusicAudio = (id: number, data: SongResult, sources: any[]) => {
  */
 export const getParsingMusicUrl = async (id: number, data: SongResult) => {
   const settingStore = useSettingsStore();
-  
+
   // 如果禁用了音乐解析功能，则直接返回空结果
   if (!settingStore.setData.enableMusicUnblock) {
     return Promise.resolve({ data: { code: 404, message: '音乐解析功能已禁用' } });
   }
-  
+
   // 1. 确定使用的音源列表(自定义或全局)
   const songId = String(id);
   const savedSourceStr = localStorage.getItem(`song_source_${songId}`);
   let musicSources: any[] = [];
-  
+
   try {
     if (savedSourceStr) {
       // 使用自定义音源
@@ -172,14 +175,14 @@ export const getParsingMusicUrl = async (id: number, data: SongResult) => {
     console.error('解析音源设置失败，使用全局设置', e);
     musicSources = settingStore.setData.enabledMusicSources || [];
   }
-  
+
   // 2. 按优先级解析
-  
+
   // 2.1 Bilibili解析(优先级最高)
   if (musicSources.includes('bilibili')) {
     return await getBilibiliAudio(data);
   }
-  
+
   // 2.2 GD音乐台解析
   if (musicSources.includes('gdmusic')) {
     const gdResult = await getGDMusicAudio(id, data);
@@ -187,12 +190,12 @@ export const getParsingMusicUrl = async (id: number, data: SongResult) => {
     // GD解析失败，继续下一步
     console.log('GD音乐台解析失败，尝试使用其他音源');
   }
-  console.log('musicSources',musicSources)
+  console.log('musicSources', musicSources);
   // 2.3 使用unblockMusic解析其他音源
   if (isElectron && musicSources.length > 0) {
     return getUnblockMusicAudio(id, data, musicSources);
   }
-  
+
   // 3. 后备方案：使用API请求
   console.log('无可用音源或不在Electron环境中，使用API请求');
   return requestMusic.get<any>('/music', { params: { id } });

src/renderer/api/playlist.ts

@@ -24,4 +24,4 @@ export function getImportTaskStatus(id: string | number) {
     method: 'get',
     params: { id }
   });
-}
+}

src/renderer/api/user.ts

@@ -14,7 +14,6 @@ export function getUserPlaylist(uid: number, limit: number = 30, offset: number
 // 播放历史
 // /user/record?uid=32953014&type=1
 export function getUserRecord(uid: number, type: number = 0) {
-  
   return request.get('/user/record', {
     params: { uid, type },
     noRetry: true

src/renderer/assets/css/base.css

@@ -10,7 +10,7 @@ body {
   border-radius: 0.5rem !important;
   overflow: hidden !important;
 }
-.n-popover:has(.transparent-popover ) {
+.n-popover:has(.transparent-popover) {
   background-color: transparent !important;
   padding: 0 !important;
 }

src/renderer/components/EQControl.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="eq-control">
     <div class="eq-header">
-      <h3>{{ t('player.eq.title') }}
+      <h3>
+        {{ t('player.eq.title') }}
         <n-tag type="warning" size="small" round v-if="!isElectron">
           桌面版可用，网页端不支持
         </n-tag>

src/renderer/components/TrafficWarningDrawer.vue

@@ -27,18 +27,10 @@
           <div class="warning-message">
             <h3>获取完整体验</h3>
             <p class="platform-support">
-              <span>
-                <i class="ri-window-line mr-1"></i>Windows 10+
-              </span>
-              <span>
-                <i class="ri-apple-line mr-1"></i>macOS
-              </span>
-              <span>
-                <i class="ri-ubuntu-line mr-1"></i>Linux
-              </span>
-              <span>
-                <i class="ri-android-line mr-1"></i>Android
-              </span>
+              <span> <i class="ri-window-line mr-1"></i>Windows 10+ </span>
+              <span> <i class="ri-apple-line mr-1"></i>macOS </span>
+              <span> <i class="ri-ubuntu-line mr-1"></i>Linux </span>
+              <span> <i class="ri-android-line mr-1"></i>Android </span>
             </p>
             <p class="description">
               下载桌面应用以获得最佳音乐体验，包含完整功能与更高音质。
@@ -47,7 +39,11 @@
           </div>
 
           <div class="action-links">
-            <a href="https://mp.weixin.qq.com/s/9pr1XQB36gShM_-TG2LBdg" target="_blank" class="doc-link">
+            <a
+              href="https://mp.weixin.qq.com/s/9pr1XQB36gShM_-TG2LBdg"
+              target="_blank"
+              class="doc-link"
+            >
               <i class="ri-file-text-line mr-1"></i> 查看使用文档
             </a>
             <a href="http://donate.alger.fun/download" target="_blank" class="download-link">
@@ -59,7 +55,7 @@
             <img class="qrcode" src="@/assets/gzh.png" alt="公众号" />
             <p>关注公众号获取最新版本与更新信息</p>
           </div>
-          
+
           <div class="support-section">
             <h4>支持项目</h4>
             <p class="support-desc">您的支持是我们持续改进的动力</p>
@@ -78,10 +74,12 @@
               </div>
             </div>
           </div>
-          
+
           <div class="drawer-actions">
             <n-button secondary class="action-button" @click="markAsDonated">已支持</n-button>
-            <n-button type="primary" class="action-button primary" @click="remindLater">稍后提醒</n-button>
+            <n-button type="primary" class="action-button primary" @click="remindLater"
+              >稍后提醒</n-button
+            >
           </div>
         </div>
       </div>
@@ -90,7 +88,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
+
 import { isMobile } from '@/utils';
 
 // 控制抽屉显示状态
@@ -117,7 +116,7 @@ const markAsDonated = () => {
 onMounted(() => {
   // 优先判断是否永久不再提示
   if (localStorage.getItem('trafficDonated4Never')) return;
-  
+
   // 判断一天后提醒
   const remindLaterTime = localStorage.getItem('trafficDonated4RemindLater');
   if (remindLaterTime) {
@@ -126,7 +125,7 @@ onMounted(() => {
     const hoursDiff = (now.getTime() - lastRemind.getTime()) / (1000 * 60 * 60);
     if (hoursDiff < 24) return;
   }
-  
+
   // 延迟20秒显示
   setTimeout(() => {
     showDrawer.value = true;
@@ -137,12 +136,12 @@ onMounted(() => {
 <style scoped lang="scss">
 .traffic-warning-trigger {
   display: inline-block;
-  
+
   .mac-style-button {
     background-color: rgba(0, 0, 0, 0.05);
     color: #333;
     transition: all 0.2s ease;
-    
+
     &:hover {
       background-color: rgba(0, 0, 0, 0.1);
     }
@@ -173,7 +172,7 @@ onMounted(() => {
   width: 100px;
   height: 100px;
   margin-bottom: 12px;
-  
+
   img {
     width: 100%;
     height: 100%;
@@ -185,21 +184,21 @@ onMounted(() => {
 .warning-message {
   text-align: center;
   max-width: 520px;
-  
+
   h3 {
     font-size: 28px;
     font-weight: 600;
     margin-bottom: 18px;
     color: #333;
   }
-  
+
   .platform-support {
     display: flex;
     justify-content: center;
     gap: 20px;
     flex-wrap: wrap;
     margin-bottom: 16px;
-    
+
     span {
       display: flex;
       align-items: center;
@@ -207,7 +206,7 @@ onMounted(() => {
       color: #444;
     }
   }
-  
+
   .description {
     font-size: 16px;
     line-height: 1.6;
@@ -222,7 +221,7 @@ onMounted(() => {
   justify-content: center;
   flex-wrap: wrap;
   margin: 6px 0;
-  
+
   a {
     display: inline-flex;
     align-items: center;
@@ -231,20 +230,20 @@ onMounted(() => {
     font-size: 16px;
     text-decoration: none;
     transition: all 0.2s ease;
-    
+
     &.doc-link {
       color: #555;
       background-color: rgba(0, 0, 0, 0.05);
-      
+
       &:hover {
         background-color: rgba(0, 0, 0, 0.1);
       }
     }
-    
+
     &.download-link {
       color: #fff;
       background-color: #007aff;
-      
+
       &:hover {
         background-color: #0062cc;
       }
@@ -259,7 +258,7 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
   gap: 10px;
-  
+
   .qrcode {
     width: 180px;
     height: 180px;
@@ -268,7 +267,7 @@ onMounted(() => {
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     background: white;
   }
-  
+
   p {
     margin-top: 14px;
     font-size: 15px;
@@ -279,14 +278,14 @@ onMounted(() => {
 .support-section {
   width: 100%;
   text-align: center;
-  
+
   h4 {
     font-size: 22px;
     font-weight: 600;
     color: #333;
     margin-bottom: 8px;
   }
-  
+
   .support-desc {
     font-size: 15px;
     color: #555;
@@ -307,21 +306,21 @@ onMounted(() => {
   flex-direction: column;
   align-items: center;
   gap: 10px;
-  
+
   .payment-icon {
     width: 220px;
     height: 220px;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-    
+
     img {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
   }
-  
+
   span {
     font-size: 15px;
     color: #444;
@@ -341,17 +340,17 @@ onMounted(() => {
   padding: 10px;
   background-color: #fff;
   z-index: 999999999;
-  
+
   .action-button {
     min-width: 110px;
     border-radius: 8px;
     font-size: 16px;
     padding: 8px 16px;
-    
+
     &.primary {
       background-color: #007aff;
       color: white;
-      
+
       &:hover {
         background-color: #0062cc;
       }
@@ -364,48 +363,48 @@ onMounted(() => {
     h3 {
       font-size: 20px;
     }
-    
+
     .platform-support {
       gap: 12px;
     }
-    
+
     .description {
       font-size: 13px;
     }
   }
-  
+
   .app-icon {
     width: 64px;
     height: 64px;
   }
-  
+
   .qrcode-section {
     .qrcode {
       width: 140px;
       height: 140px;
     }
   }
-  
+
   .payment-option {
     .payment-icon {
       width: 190px;
       height: 190px;
     }
   }
-  
+
   .drawer-actions {
     flex-wrap: wrap;
     position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 10px;
-  background-color: #fff;
-  z-index: 999999999;
-    
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 10px;
+    background-color: #fff;
+    z-index: 999999999;
+
     .action-button {
       flex: 1 0 auto;
     }
   }
 }
-</style>
+</style>

src/renderer/components/common/DonationList.vue

@@ -4,31 +4,21 @@
       <div class="description">
         <p>{{ t('donation.description') }}</p>
         <p>{{ t('donation.message') }}</p>
-          <n-button type="primary" @click="toDonateList">
-            <template #icon>
-              <i class="ri-cup-line"></i>
-            </template>
-            {{ t('donation.toDonateList') }}
-          </n-button> 
+        <n-button type="primary" @click="toDonateList">
+          <template #icon>
+            <i class="ri-cup-line"></i>
+          </template>
+          {{ t('donation.toDonateList') }}
+        </n-button>
       </div>
       <div class="qrcode-grid">
         <div class="qrcode-item">
-          <n-image
-            :src="alipay"
-            :alt="t('common.alipay')"
-            class="qrcode-image"
-            preview-disabled
-          />
+          <n-image :src="alipay" :alt="t('common.alipay')" class="qrcode-image" preview-disabled />
           <span class="qrcode-label">{{ t('common.alipay') }}</span>
         </div>
-        
+
         <div class="qrcode-item">
-          <n-image
-            :src="wechat"
-            :alt="t('common.wechat')"
-            class="qrcode-image"
-            preview-disabled
-          />
+          <n-image :src="wechat" :alt="t('common.wechat')" class="qrcode-image" preview-disabled />
           <span class="qrcode-label">{{ t('common.wechat') }}</span>
         </div>
       </div>
@@ -43,7 +33,7 @@
         {{ t('donation.refresh') }}
       </n-button>
     </div>
-    
+
     <div class="donation-grid" :class="{ 'grid-expanded': isExpanded }">
       <div
         v-for="donor in displayDonors"
@@ -53,12 +43,7 @@
       >
         <div class="card-content">
           <div class="donor-avatar">
-            <n-avatar
-              :src="donor.avatar"
-              :fallback-src="defaultAvatar"
-              round
-              class="avatar-img"
-            />
+            <n-avatar :src="donor.avatar" :fallback-src="defaultAvatar" round class="avatar-img" />
           </div>
           <div class="donor-info">
             <div class="donor-meta">
@@ -68,7 +53,7 @@
             <div class="donation-date">{{ donor.date }}</div>
           </div>
         </div>
-        
+
         <!-- 有留言的情况 -->
         <n-popover
           v-if="donor.message"
@@ -90,7 +75,7 @@
             <i class="ri-double-quotes-r quote-icon"></i>
           </div>
         </n-popover>
-        
+
         <!-- 没有留言的情况显示占位符 -->
         <div v-else class="donation-message-placeholder">
           <i class="ri-emotion-line"></i>
@@ -175,7 +160,7 @@ const toDonateList = () => {
 
 .header-container {
   @apply flex justify-between items-center px-4 py-2;
-  
+
   .section-title {
     @apply text-lg font-medium text-gray-700 dark:text-gray-200;
   }
@@ -205,7 +190,7 @@ const toDonateList = () => {
   @apply border border-gray-200 dark:border-gray-700/10;
   @apply flex flex-col;
   min-height: 100px;
-  
+
   .card-content {
     @apply flex items-start gap-2 mb-2;
   }
@@ -225,11 +210,11 @@ const toDonateList = () => {
 
   .donor-meta {
     @apply flex justify-between items-center mb-0.5;
-    
+
     .donor-name {
       @apply text-sm font-medium truncate flex-1 mr-1;
     }
-    
+
     .price-tag {
       @apply text-xs text-gray-400/80 dark:text-gray-500/80 whitespace-nowrap;
     }
@@ -245,19 +230,19 @@ const toDonateList = () => {
   @apply bg-gray-100/10 dark:bg-dark-300 rounded;
   @apply flex items-start;
   @apply cursor-pointer transition-all duration-200;
-  
+
   .quote-icon {
     @apply text-gray-300 dark:text-gray-600 flex-shrink-0 opacity-60;
-    
+
     &:first-child {
       @apply mr-1 self-start;
     }
-    
+
     &:last-child {
       @apply ml-1 self-end;
     }
   }
-  
+
   .message-text {
     @apply flex-1 line-clamp-2;
   }
@@ -272,7 +257,7 @@ const toDonateList = () => {
   @apply bg-gray-100/5 dark:bg-dark-300 rounded;
   @apply flex items-center justify-center gap-1 italic;
   @apply border border-transparent;
-  
+
   i {
     @apply text-gray-300 dark:text-gray-600;
   }
@@ -284,11 +269,11 @@ const toDonateList = () => {
 
   .quote-icon {
     @apply text-gray-400 dark:text-gray-500 flex-shrink-0;
-    
+
     &:first-child {
       @apply mr-1.5 self-start;
     }
-    
+
     &:last-child {
       @apply ml-1.5 self-end;
     }
@@ -305,30 +290,30 @@ const toDonateList = () => {
 
 .qrcode-container {
   @apply p-5 rounded-lg shadow-sm bg-light-100 dark:bg-gray-800/5 backdrop-blur-sm border border-gray-200 dark:border-gray-700/10;
-  
+
   .description {
     @apply text-center text-sm text-gray-600 dark:text-gray-300 mb-4;
-    
+
     p {
       @apply mb-2;
     }
   }
-  
+
   .qrcode-grid {
     @apply flex justify-between items-center gap-4 flex-wrap;
-    
+
     .qrcode-item {
       @apply flex flex-col items-center gap-2;
-      
+
       .qrcode-image {
         @apply w-36 h-36 rounded-lg border border-gray-200 dark:border-gray-700/10 shadow-sm transition-transform duration-200 hover:scale-105;
       }
-      
+
       .qrcode-label {
         @apply text-sm text-gray-600 dark:text-gray-300;
       }
     }
-    
+
     .donate-button {
       @apply flex flex-col items-center justify-center;
     }

src/renderer/components/common/DownloadDrawer.vue

@@ -59,9 +59,9 @@ onMounted(() => {
   // 监听下载完成
   window.electron.ipcRenderer.on('music-download-complete', async (_, data) => {
     if (data.success) {
-      downloadList.value = downloadList.value.filter(item => item.filename !== data.filename);
+      downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
     } else {
-      const existingItem = downloadList.value.find(item => item.filename === data.filename);
+      const existingItem = downloadList.value.find((item) => item.filename === data.filename);
       if (existingItem) {
         Object.assign(existingItem, {
           status: 'error',
@@ -69,7 +69,7 @@ onMounted(() => {
           progress: 0
         });
         setTimeout(() => {
-          downloadList.value = downloadList.value.filter(item => item.filename !== data.filename);
+          downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
         }, 3000);
       }
     }

src/renderer/components/common/MusicListNavigator.ts

@@ -1,4 +1,5 @@
 import { Router } from 'vue-router';
+
 import { useMusicStore } from '@/store/modules/music';
 
 /**
@@ -35,4 +36,4 @@ export function navigateToMusicList(
       name: 'musicList'
     });
   }
-} 
+}

src/renderer/components/common/SearchItem.vue

@@ -31,13 +31,14 @@
 </template>
 
 <script setup lang="ts">
+import { useRouter } from 'vue-router';
+
 import { getAlbum, getListDetail } from '@/api/list';
 import MvPlayer from '@/components/MvPlayer.vue';
+import { useMusicStore } from '@/store/modules/music';
 import { usePlayerStore } from '@/store/modules/player';
 import { IMvItem } from '@/type/mv';
 import { getImgUrl } from '@/utils';
-import { useRouter } from 'vue-router';
-import { useMusicStore } from '@/store/modules/music';
 
 const props = withDefaults(
   defineProps<{
@@ -88,15 +89,10 @@ const handleClick = async () => {
       },
       description: res.data.album.description
     };
-    
+
     // 保存数据到store
-    musicStore.setCurrentMusicList(
-      songList.value, 
-      props.item.name, 
-      listInfo.value, 
-      false
-    );
-    
+    musicStore.setCurrentMusicList(songList.value, props.item.name, listInfo.value, false);
+
     // 使用路由跳转
     router.push({
       name: 'musicList',
@@ -107,15 +103,10 @@ const handleClick = async () => {
     const res = await getListDetail(props.item.id);
     songList.value = res.data.playlist.tracks;
     listInfo.value = res.data.playlist;
-    
+
     // 保存数据到store
-    musicStore.setCurrentMusicList(
-      songList.value, 
-      props.item.name, 
-      listInfo.value, 
-      false
-    );
-    
+    musicStore.setCurrentMusicList(songList.value, props.item.name, listInfo.value, false);
+
     // 使用路由跳转
     router.push({
       name: 'musicList',

src/renderer/components/common/SongItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <component 
+  <component
     :is="renderComponent"
     :item="item"
     :favorite="favorite"
@@ -16,12 +16,13 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
+
 import type { SongResult } from '@/type/music';
 
-import StandardSongItem from './songItemCom/StandardSongItem.vue';
-import MiniSongItem from './songItemCom/MiniSongItem.vue';
-import ListSongItem from './songItemCom/ListSongItem.vue';
 import CompactSongItem from './songItemCom/CompactSongItem.vue';
+import ListSongItem from './songItemCom/ListSongItem.vue';
+import MiniSongItem from './songItemCom/MiniSongItem.vue';
+import StandardSongItem from './songItemCom/StandardSongItem.vue';
 
 const props = withDefaults(
   defineProps<{

src/renderer/components/common/UpdateModal.vue

@@ -421,7 +421,7 @@ const handleUpdate = async () => {
 }
 </style>
 
-<style lang="scss">
+<style lang="scss" scoped>
 /* 对话框内容样式 */
 .update-dialog-content {
   display: flex;

src/renderer/components/common/songItemCom/BaseSongItem.vue

@@ -11,7 +11,7 @@
     <slot name="image"></slot>
     <slot name="content"></slot>
     <slot name="operating"></slot>
-    
+
     <song-item-dropdown
       v-if="isElectron"
       :item="item"
@@ -33,10 +33,11 @@
 </template>
 
 <script lang="ts" setup>
-import SongItemDropdown from './SongItemDropdown.vue';
 import { useSongItem } from '@/hooks/useSongItem';
-import { isElectron } from '@/utils';
 import type { SongResult } from '@/type/music';
+import { isElectron } from '@/utils';
+
+import SongItemDropdown from './SongItemDropdown.vue';
 
 const props = defineProps<{
   item: SongResult;
@@ -115,4 +116,4 @@ defineExpose({
 .text-ellipsis {
   width: 100%;
 }
-</style> 
+</style>

src/renderer/components/common/songItemCom/CompactSongItem.vue

@@ -14,7 +14,11 @@
   >
     <!-- 索引插槽 -->
     <template #index>
-      <div v-if="index !== undefined" class="song-item-index" :class="{ 'text-green-500': isPlaying }">
+      <div
+        v-if="index !== undefined"
+        class="song-item-index"
+        :class="{ 'text-green-500': isPlaying }"
+      >
         {{ index + 1 }}
       </div>
     </template>
@@ -25,13 +29,17 @@
         <n-checkbox :checked="selected" />
       </div>
     </template>
-    
+
     <!-- 内容插槽 -->
     <template #content>
       <div class="song-item-content-compact">
         <div class="song-item-content-compact-wrapper">
           <div class="song-item-content-compact-title w-60 flex-shrink-0">
-            <n-ellipsis class="text-ellipsis" line-clamp="1" :class="{ 'text-green-500': isPlaying }">
+            <n-ellipsis
+              class="text-ellipsis"
+              line-clamp="1"
+              :class="{ 'text-green-500': isPlaying }"
+            >
               {{ item.name }}
             </n-ellipsis>
           </div>
@@ -56,11 +64,15 @@
         </div>
       </div>
     </template>
-    
+
     <!-- 操作插槽 -->
     <template #operating>
       <div class="song-item-operating-compact">
-        <div v-if="favorite" class="song-item-operating-like" :class="{ 'opacity-0': !isHovering && !isFavorite }">
+        <div
+          v-if="favorite"
+          class="song-item-operating-like"
+          :class="{ 'opacity-0': !isHovering && !isFavorite }"
+        >
           <i
             class="iconfont icon-likefill"
             :class="{ 'like-active': isFavorite }"
@@ -69,13 +81,21 @@
         </div>
         <div
           class="song-item-operating-play animate__animated"
-          :class="{ 'bg-green-600': isPlaying, 'animate__flipInY': playLoading, 'opacity-0': !isHovering && !isPlaying }"
+          :class="{
+            'bg-green-600': isPlaying,
+            animate__flipInY: playLoading,
+            'opacity-0': !isHovering && !isPlaying
+          }"
           @click="onPlayMusic"
         >
           <i v-if="isPlaying && play" class="iconfont icon-stop"></i>
           <i v-else class="iconfont icon-playfill"></i>
         </div>
-        <div class="song-item-operating-menu" @click.stop="onMenuClick" :class="{ 'opacity-0': !isHovering && !isPlaying }">
+        <div
+          class="song-item-operating-menu"
+          @click.stop="onMenuClick"
+          :class="{ 'opacity-0': !isHovering && !isPlaying }"
+        >
           <i class="iconfont ri-more-fill"></i>
         </div>
       </div>
@@ -86,10 +106,12 @@
 <script lang="ts" setup>
 import { NCheckbox, NEllipsis } from 'naive-ui';
 import { computed, ref } from 'vue';
+
 import { usePlayerStore } from '@/store';
-import BaseSongItem from './BaseSongItem.vue';
 import type { SongResult } from '@/type/music';
 
+import BaseSongItem from './BaseSongItem.vue';
+
 const playerStore = usePlayerStore();
 
 const props = withDefaults(
@@ -249,4 +271,4 @@ const formatDuration = (ms: number): string => {
 :deep(.text-ellipsis) {
   width: 100%;
 }
-</style> 
+</style>

src/renderer/components/common/songItemCom/ListSongItem.vue

@@ -18,7 +18,7 @@
         <n-checkbox :checked="selected" />
       </div>
     </template>
-    
+
     <!-- 图片插槽 -->
     <template #image>
       <n-image
@@ -32,12 +32,16 @@
         @load="onImageLoad"
       />
     </template>
-    
+
     <!-- 内容插槽 -->
     <template #content>
       <div class="song-item-content">
         <div class="song-item-content-wrapper">
-          <n-ellipsis class="song-item-content-title text-ellipsis" line-clamp="1" :class="{ 'text-green-500': isPlaying }">
+          <n-ellipsis
+            class="song-item-content-title text-ellipsis"
+            line-clamp="1"
+            :class="{ 'text-green-500': isPlaying }"
+          >
             {{ item.name }}
           </n-ellipsis>
           <div class="song-item-content-divider">-</div>
@@ -54,7 +58,7 @@
         </div>
       </div>
     </template>
-    
+
     <!-- 操作插槽 -->
     <template #operating>
       <div class="song-item-operating song-item-operating-list">
@@ -67,7 +71,7 @@
         </div>
         <div
           class="song-item-operating-play bg-gray-300 dark:bg-gray-800 animate__animated"
-          :class="{ 'bg-green-600': isPlaying, 'animate__flipInY': playLoading }"
+          :class="{ 'bg-green-600': isPlaying, animate__flipInY: playLoading }"
           @click="onPlayMusic"
         >
           <i v-if="isPlaying && play" class="iconfont icon-stop"></i>
@@ -81,11 +85,13 @@
 <script lang="ts" setup>
 import { NCheckbox, NEllipsis, NImage } from 'naive-ui';
 import { computed, ref } from 'vue';
+
 import { usePlayerStore } from '@/store';
-import BaseSongItem from './BaseSongItem.vue';
 import type { SongResult } from '@/type/music';
 import { getImgUrl } from '@/utils';
 
+import BaseSongItem from './BaseSongItem.vue';
+
 const playerStore = usePlayerStore();
 
 const props = withDefaults(
@@ -187,4 +193,4 @@ const onPlayMusic = () => {
     }
   }
 }
-</style> 
+</style>

src/renderer/components/common/songItemCom/MiniSongItem.vue

@@ -18,7 +18,7 @@
         <n-checkbox :checked="selected" />
       </div>
     </template>
-    
+
     <!-- 图片插槽 -->
     <template #image>
       <n-image
@@ -32,7 +32,7 @@
         @load="onImageLoad"
       />
     </template>
-    
+
     <!-- 内容插槽 -->
     <template #content>
       <div class="song-item-content">
@@ -55,7 +55,7 @@
         </div>
       </div>
     </template>
-    
+
     <!-- 操作插槽 -->
     <template #operating>
       <div class="song-item-operating">
@@ -68,7 +68,7 @@
         </div>
         <div
           class="song-item-operating-play bg-gray-300 dark:bg-gray-800 animate__animated"
-          :class="{ 'bg-green-600': isPlaying, 'animate__flipInY': playLoading }"
+          :class="{ 'bg-green-600': isPlaying, animate__flipInY: playLoading }"
           @click="onPlayMusic"
         >
           <i v-if="isPlaying && play" class="iconfont icon-stop"></i>
@@ -82,11 +82,13 @@
 <script lang="ts" setup>
 import { NCheckbox, NEllipsis, NImage } from 'naive-ui';
 import { computed, ref } from 'vue';
+
 import { usePlayerStore } from '@/store';
-import BaseSongItem from './BaseSongItem.vue';
 import type { SongResult } from '@/type/music';
 import { getImgUrl } from '@/utils';
 
+import BaseSongItem from './BaseSongItem.vue';
+
 const playerStore = usePlayerStore();
 
 const props = withDefaults(
@@ -169,11 +171,11 @@ const onPlayMusic = () => {
 
     &-like {
       @apply mr-1 ml-1 cursor-pointer;
-      
+
       .icon-likefill {
         @apply text-base transition text-gray-500 dark:text-gray-400 hover:text-red-500;
       }
-      
+
       .like-active {
         @apply text-red-500 dark:text-red-500;
       }
@@ -190,4 +192,4 @@ const onPlayMusic = () => {
     }
   }
 }
-</style> 
+</style>

src/renderer/components/common/songItemCom/SongItemDropdown.vue

@@ -15,7 +15,7 @@
 
 <script lang="ts" setup>
 import type { MenuOption } from 'naive-ui';
-import { NEllipsis, NImage, NDropdown } from 'naive-ui';
+import { NDropdown, NEllipsis, NImage } from 'naive-ui';
 import { computed, h, inject } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -35,12 +35,12 @@ const props = defineProps<{
 }>();
 
 const emits = defineEmits([
-  'update:show', 
-  'select', 
-  'play', 
-  'play-next', 
-  'download', 
-  'add-to-playlist', 
+  'update:show',
+  'select',
+  'play',
+  'play-next',
+  'download',
+  'add-to-playlist',
   'toggle-favorite',
   'toggle-dislike',
   'remove'
@@ -104,7 +104,9 @@ const renderSongPreview = () => {
                 },
                 {
                   default: () => {
-                    const artistNames = (props.item.ar || props.item.song?.artists)?.map((a) => a.name).join(' / ');
+                    const artistNames = (props.item.ar || props.item.song?.artists)
+                      ?.map((a) => a.name)
+                      .join(' / ');
                     return artistNames || '未知艺术家';
                   }
                 }
@@ -164,8 +166,11 @@ const dropdownOptions = computed<MenuOption[]>(() => {
     {
       label: props.isDislike ? t('songItem.menu.undislike') : t('songItem.menu.dislike'),
       key: 'dislike',
-      icon: () => h('i', { class: `iconfont ${props.isDislike ? 'ri-dislike-fill text-green-500': 'ri-dislike-line'}` })
-    },
+      icon: () =>
+        h('i', {
+          class: `iconfont ${props.isDislike ? 'ri-dislike-fill text-green-500' : 'ri-dislike-line'}`
+        })
+    }
   ];
 
   if (props.canRemove) {
@@ -188,7 +193,7 @@ const dropdownOptions = computed<MenuOption[]>(() => {
 // 处理选择
 const handleSelect = (key: string | number) => {
   emits('update:show', false);
-  
+
   switch (key) {
     case 'download':
       emits('download');
@@ -249,4 +254,4 @@ const handleSelect = (key: string | number) => {
 :deep(.n-dropdown-option-body--render) {
   @apply p-0;
 }
-</style> 
+</style>

src/renderer/components/common/songItemCom/StandardSongItem.vue

@@ -18,7 +18,7 @@
         <n-checkbox :checked="selected" />
       </div>
     </template>
-    
+
     <!-- 图片插槽 -->
     <template #image>
       <n-image
@@ -32,12 +32,17 @@
         @load="onImageLoad"
       />
     </template>
-    
+
     <!-- 内容插槽 -->
     <template #content>
       <div class="song-item-content">
         <div class="song-item-content-title">
-          <n-ellipsis class="text-ellipsis" line-clamp="1" :class="{ 'text-green-500': isPlaying }">{{ item.name }}</n-ellipsis>
+          <n-ellipsis
+            class="text-ellipsis"
+            line-clamp="1"
+            :class="{ 'text-green-500': isPlaying }"
+            >{{ item.name }}</n-ellipsis
+          >
         </div>
         <div class="song-item-content-name">
           <n-ellipsis class="text-ellipsis" line-clamp="1">
@@ -53,7 +58,7 @@
         </div>
       </div>
     </template>
-    
+
     <!-- 操作插槽 -->
     <template #operating>
       <div class="song-item-operating">
@@ -74,7 +79,7 @@
         </n-tooltip>
         <div
           class="song-item-operating-play bg-gray-300 dark:bg-gray-800 animate__animated"
-          :class="{ 'bg-green-600': isPlaying, 'animate__flipInY': playLoading }"
+          :class="{ 'bg-green-600': isPlaying, animate__flipInY: playLoading }"
           @click="onPlayMusic"
         >
           <i v-if="isPlaying && play" class="iconfont icon-stop"></i>
@@ -91,10 +96,11 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { usePlayerStore } from '@/store';
-import BaseSongItem from './BaseSongItem.vue';
 import type { SongResult } from '@/type/music';
 import { getImgUrl } from '@/utils';
 
+import BaseSongItem from './BaseSongItem.vue';
+
 const { t } = useI18n();
 const playerStore = usePlayerStore();
 
@@ -185,7 +191,7 @@ const onPlayNext = () => {
 
     &-next {
       @apply mr-2 cursor-pointer transition-all;
-      
+
       .iconfont {
         @apply text-xl transition text-gray-500 dark:text-gray-400 hover:text-green-500;
       }
@@ -210,4 +216,4 @@ const onPlayNext = () => {
     @apply mr-3 cursor-pointer;
   }
 }
-</style> 
+</style>

src/renderer/components/home/RecommendAlbum.vue

@@ -32,9 +32,9 @@ import { useRouter } from 'vue-router';
 
 import { getNewAlbum } from '@/api/home';
 import { getAlbum } from '@/api/list';
-import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
 import { navigateToMusicList } from '@/components/common/MusicListNavigator';
 import type { IAlbumNew } from '@/type/album';
+import { getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
 
 const { t } = useI18n();
 const albumData = ref<IAlbumNew>();
@@ -51,17 +51,17 @@ const handleClick = async (item: any) => {
 
 const openAlbum = async (album: any) => {
   if (!album) return;
-  
+
   try {
     const res = await getAlbum(album.id);
     const { songs, album: albumInfo } = res.data;
-    
+
     const formattedSongs = songs.map((song: any) => {
       song.al.picUrl = song.al.picUrl || albumInfo.picUrl;
       song.picUrl = song.al.picUrl || albumInfo.picUrl || song.picUrl;
       return song;
     });
-    
+
     navigateToMusicList(router, {
       id: album.id,
       type: 'album',

src/renderer/components/home/TopBanner.vue

@@ -30,11 +30,7 @@
               </div>
 
               <div class="mt-2">
-                <p
-                  v-for="item in getDisplayDaySongs.slice(0, 5)"
-                  :key="item.id"
-                  class="text-el"
-                >
+                <p v-for="item in getDisplayDaySongs.slice(0, 5)" :key="item.id" class="text-el">
                   {{ item.name }}
                   <br />
                 </p>
@@ -100,7 +96,9 @@
             @click="handleArtistClick(item.id)"
           >
             <div
-              :style="setBackgroundImg(getImgUrl(item.picUrl || item.avatar || item.cover, '500y500'))"
+              :style="
+                setBackgroundImg(getImgUrl(item.picUrl || item.avatar || item.cover, '500y500'))
+              "
               class="recommend-singer-item-bg"
             ></div>
             <div class="recommend-singer-item-count p-2 text-base text-gray-200 z-10">
@@ -128,7 +126,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, watchEffect, computed } from 'vue';
+import { computed, onMounted, ref, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -136,6 +134,7 @@ import { getDayRecommend, getHotSinger } from '@/api/home';
 import { getListDetail } from '@/api/list';
 import { getMusicDetail } from '@/api/music';
 import { getUserPlaylist } from '@/api/user';
+import { navigateToMusicList } from '@/components/common/MusicListNavigator';
 import { useArtist } from '@/hooks/useArtist';
 import { usePlayerStore, useUserStore } from '@/store';
 import { IDayRecommend } from '@/type/day_recommend';
@@ -150,7 +149,6 @@ import {
   setAnimationDelay,
   setBackgroundImg
 } from '@/utils';
-import { navigateToMusicList } from '@/components/common/MusicListNavigator';
 
 const userStore = useUserStore();
 const playerStore = usePlayerStore();
@@ -232,7 +230,6 @@ onMounted(async () => {
   loadNonUserData();
 });
 
-
 // 提取每日推荐加载逻辑到单独的函数
 const loadDayRecommendData = async () => {
   try {
@@ -242,7 +239,9 @@ const loadDayRecommendData = async () => {
     const dayRecommendSource = dayRecommend as unknown as IDayRecommend;
     dayRecommendData.value = {
       ...dayRecommendSource,
-      dailySongs: dayRecommendSource.dailySongs.filter((song: any) => !playerStore.dislikeList.includes(song.id))
+      dailySongs: dayRecommendSource.dailySongs.filter(
+        (song: any) => !playerStore.dislikeList.includes(song.id)
+      )
     };
   } catch (error) {
     console.error('获取每日推荐失败:', error);
@@ -256,11 +255,10 @@ const loadNonUserData = async () => {
     if (!userStore.user) {
       await loadDayRecommendData();
     }
-    
+
     // 获取热门歌手
     const { data: singerData } = await getHotSinger({ offset: 0, limit: 5 });
     hotSingerData.value = singerData;
-
   } catch (error) {
     console.error('加载热门歌手数据失败:', error);
   }
@@ -285,15 +283,17 @@ const handleArtistClick = (id: number) => {
   navigateToArtist(id);
 };
 const getDisplayDaySongs = computed(() => {
-  if(!dayRecommendData.value){
+  if (!dayRecommendData.value) {
     return [];
   }
-  return dayRecommendData.value.dailySongs.filter((song) => !playerStore.dislikeList.includes(song.id));
-})
+  return dayRecommendData.value.dailySongs.filter(
+    (song) => !playerStore.dislikeList.includes(song.id)
+  );
+});
 
 const showDayRecommend = () => {
   if (!dayRecommendData.value?.dailySongs) return;
-  
+
   navigateToMusicList(router, {
     type: 'dailyRecommend',
     name: t('comp.recommendSinger.songlist'),
@@ -305,11 +305,11 @@ const showDayRecommend = () => {
 const openPlaylist = (item: any) => {
   playlistItem.value = item;
   playlistLoading.value = true;
-  
-  getListDetail(item.id).then(res => {
+
+  getListDetail(item.id).then((res) => {
     playlistDetail.value = res.data;
     playlistLoading.value = false;
-    
+
     navigateToMusicList(router, {
       id: item.id,
       type: 'playlist',
@@ -416,7 +416,6 @@ watchEffect(() => {
   }
 });
 
-
 const getPlaylistGridClass = (length: number) => {
   switch (length) {
     case 1:

src/renderer/components/lyric/LyricCorrectionControl.vue

@@ -1,21 +1,19 @@
 <script setup lang="ts">
-import { defineProps, defineEmits } from 'vue';
+import { defineEmits, defineProps } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps<{
-  correctionTime: number
+  correctionTime: number;
 }>();
 const emit = defineEmits<{
-  (e: 'adjust', delta: number): void
+  (e: 'adjust', delta: number): void;
 }>();
 
 const { t } = useI18n();
 </script>
 
 <template>
-  <div
-    class="lyric-correction"
-  >
+  <div class="lyric-correction">
     <n-tooltip placement="right">
       <template #trigger>
         <div
@@ -28,7 +26,9 @@ const { t } = useI18n();
       </template>
       <span>{{ t('player.subtractCorrection', { num: 0.2 }) }}</span>
     </n-tooltip>
-    <span class="text-xs py-0.5 px-1 rounded bg-white/70 dark:bg-neutral-800/70 shadow font-mono tracking-wider text-gray-700 dark:text-gray-200 bg-opacity-40 backdrop-blur-2xl">
+    <span
+      class="text-xs py-0.5 px-1 rounded bg-white/70 dark:bg-neutral-800/70 shadow font-mono tracking-wider text-gray-700 dark:text-gray-200 bg-opacity-40 backdrop-blur-2xl"
+    >
       {{ props.correctionTime > 0 ? '+' : '' }}{{ props.correctionTime.toFixed(1) }}s
     </span>
     <n-tooltip placement="right">
@@ -55,9 +55,9 @@ const { t } = useI18n();
   @apply w-7 h-7 flex items-center justify-center rounded-lg bg-white dark:bg-neutral-800 border border-white/20 dark:border-neutral-700/40 shadow-md backdrop-blur-2xl cursor-pointer transition-all duration-150 text-gray-700 dark:text-gray-200 hover:bg-green-500/80 hover:text-white hover:border-green-400/60 active:scale-95 bg-opacity-40 dark:hover:bg-green-500/80 dark:hover:text-white dark:hover:border-green-400/60 dark:hover:bg-opacity-40;
 }
 
-.mobile{
+.mobile {
   .lyric-correction {
     @apply opacity-100;
   }
 }
-</style> 
+</style>

src/renderer/components/lyric/MusicFull.vue

@@ -72,7 +72,7 @@
             v-if="!config.hideMiniPlayBar"
             class="mt-4"
             :pure-mode-enabled="config.pureModeEnabled"
-            :isDark=" textColors.theme === 'dark'"
+            :isDark="textColors.theme === 'dark'"
           />
         </div>
       </div>
@@ -135,7 +135,7 @@
             </div>
           </div>
           <!-- 歌词右下角矫正按钮组件 -->
-          <LyricCorrectionControl
+          <lyric-correction-control
             v-if="!isMobile"
             :correction-time="correctionTime"
             @adjust="adjustCorrectionTime"
@@ -151,19 +151,19 @@ import { useDebounceFn } from '@vueuse/core';
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import LyricCorrectionControl from '@/components/lyric/LyricCorrectionControl.vue';
 import LyricSettings from '@/components/lyric/LyricSettings.vue';
 import SimplePlayBar from '@/components/player/SimplePlayBar.vue';
-import LyricCorrectionControl from '@/components/lyric/LyricCorrectionControl.vue';
 import {
+  adjustCorrectionTime,
   artistList,
+  correctionTime,
   lrcArray,
   nowIndex,
   playMusic,
   setAudioTime,
   textColors,
-  useLyricProgress,
-  correctionTime,
-  adjustCorrectionTime
+  useLyricProgress
 } from '@/hooks/MusicHook';
 import { useArtist } from '@/hooks/useArtist';
 import { usePlayerStore } from '@/store/modules/player';

src/renderer/components/lyric/MusicFullWrapper.vue

@@ -4,9 +4,10 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { isMobile } from '@/utils';
+
 import MusicFull from '@/components/lyric/MusicFull.vue';
 import MusicFullMobile from '@/components/lyric/MusicFullMobile.vue';
+import { isMobile } from '@/utils';
 
 // 根据当前设备类型选择需要显示的组件
 const componentToUse = computed(() => {
@@ -18,4 +19,4 @@ const musicFullRef = ref<InstanceType<typeof MusicFull>>();
 defineExpose({
   musicFullRef
 });
-</script> 
+</script>

src/renderer/components/lyric/ThemeColorPanel.vue

@@ -44,7 +44,11 @@
               class="color-preview"
               :style="{ backgroundColor: currentColor }"
               @click="showColorPicker = !showColorPicker"
-              :title="showColorPicker ? t('settings.themeColor.tooltips.closeColorPicker') : t('settings.themeColor.tooltips.openColorPicker')"
+              :title="
+                showColorPicker
+                  ? t('settings.themeColor.tooltips.closeColorPicker')
+                  : t('settings.themeColor.tooltips.openColorPicker')
+              "
             >
               <i class="ri-palette-line"></i>
             </div>
@@ -70,7 +74,7 @@
           </div>
         </div>
       </div>
-      
+
       <!-- 颜色选择器（展开时显示） -->
       <div v-if="showColorPicker" class="color-picker-dropdown">
         <n-color-picker
@@ -86,16 +90,16 @@
 </template>
 
 <script setup lang="ts">
+import { NColorPicker } from 'naive-ui';
 import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { NColorPicker } from 'naive-ui';
 
 import {
   getLyricThemeColors,
   getPresetColorValue,
-  validateColor,
+  type LyricThemeColor,
   optimizeColorForTheme,
-  type LyricThemeColor
+  validateColor
 } from '@/utils/linearColor';
 
 interface Props {
@@ -105,7 +109,7 @@ interface Props {
 }
 
 interface Emits {
-  (e: 'colorChange', color: string): void;
+  (e: 'colorChange', _color: string): void;
   (e: 'close'): void;
 }
 
@@ -160,7 +164,7 @@ const handlePresetColorSelect = (color: LyricThemeColor) => {
   const colorValue = getColorValue(color);
   const optimizedColor = optimizeColorForTheme(colorValue, props.theme);
   emit('colorChange', optimizedColor);
-  
+
   // 更新输入框和选择器
   colorInput.value = optimizedColor;
   pickerColor.value = optimizedColor;
@@ -253,31 +257,31 @@ watch(
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   z-index: 1000;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  
+
   &.hidden {
     opacity: 0;
     visibility: hidden;
     transform: translateX(-50%) translateY(-10px) scale(0.95);
     pointer-events: none;
   }
-  
+
   &.visible {
     opacity: 1;
     visibility: visible;
     transform: translateX(-50%) translateY(0) scale(1);
     pointer-events: auto;
   }
-  
+
   // 小屏幕适配
   @media (max-width: 520px) {
     min-width: calc(100vw - 40px);
     left: 20px;
     transform: none;
-    
+
     &.hidden {
       transform: translateY(-10px) scale(0.95);
     }
-    
+
     &.visible {
       transform: translateY(0) scale(1);
     }
@@ -289,14 +293,14 @@ watch(
   justify-content: space-between;
   align-items: center;
   margin-bottom: 12px;
-  
+
   .panel-title {
     font-size: 13px;
     font-weight: 600;
     color: var(--text-color);
     opacity: 0.9;
   }
-  
+
   .close-button {
     width: 24px;
     height: 24px;
@@ -307,12 +311,12 @@ watch(
     border-radius: 6px;
     color: var(--text-color);
     transition: all 0.2s ease;
-    
+
     &:hover {
       background: rgba(255, 255, 255, 0.15);
       color: #ff6b6b;
     }
-    
+
     i {
       font-size: 14px;
     }
@@ -325,7 +329,7 @@ watch(
     align-items: center;
     gap: 16px;
   }
-  
+
   .section-label {
     font-size: 11px;
     font-weight: 500;
@@ -334,7 +338,7 @@ watch(
     margin-bottom: 6px;
     text-align: center;
   }
-  
+
   .divider {
     width: 1px;
     height: 40px;
@@ -347,7 +351,7 @@ watch(
   .preset-colors {
     display: flex;
     gap: 6px;
-    
+
     .color-dot {
       width: 24px;
       height: 24px;
@@ -358,17 +362,17 @@ watch(
       display: flex;
       align-items: center;
       justify-content: center;
-      
+
       &:hover {
         transform: scale(1.1);
         border-color: rgba(255, 255, 255, 0.3);
       }
-      
+
       &.active {
         border-color: var(--text-color);
         box-shadow: 0 0 0 2px var(--control-bg);
       }
-      
+
       i {
         color: white;
         font-size: 10px;
@@ -384,7 +388,7 @@ watch(
     display: flex;
     gap: 8px;
     align-items: center;
-    
+
     .color-preview {
       width: 24px;
       height: 24px;
@@ -395,19 +399,19 @@ watch(
       align-items: center;
       justify-content: center;
       transition: all 0.2s ease;
-      
+
       &:hover {
         border-color: rgba(255, 255, 255, 0.4);
         transform: scale(1.05);
       }
-      
+
       i {
         color: white;
         font-size: 12px;
         text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
       }
     }
-    
+
     .color-input {
       width: 80px;
       height: 24px;
@@ -420,12 +424,12 @@ watch(
       font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
       outline: none;
       transition: all 0.2s ease;
-      
+
       &:focus {
         border-color: var(--highlight-color, rgba(255, 255, 255, 0.4));
         background: rgba(255, 255, 255, 0.12);
       }
-      
+
       &::placeholder {
         color: rgba(255, 255, 255, 0.4);
       }
@@ -441,7 +445,7 @@ watch(
     line-height: 1.2;
     white-space: nowrap;
     transition: all 0.2s ease;
-    
+
     &:hover {
       transform: scale(1.02);
     }
@@ -455,7 +459,7 @@ watch(
   background: rgba(0, 0, 0, 0.2);
   border-radius: 6px;
   border: 1px solid rgba(255, 255, 255, 0.1);
-  
+
   :deep(.n-color-picker) {
     width: 100%;
   }
@@ -466,15 +470,15 @@ watch(
   .compact-layout {
     flex-direction: column;
     gap: 12px;
-    
+
     .divider {
       width: 100%;
       height: 1px;
     }
   }
-  
+
   .preset-section .preset-colors {
     justify-content: center;
   }
 }
-</style>
+</style>

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>

src/renderer/components/settings/ClearCacheSettings.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, defineProps, defineEmits } from 'vue';
+import { defineEmits, defineProps, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
@@ -113,4 +113,4 @@ const handleCancel = () => {
   selectedTypes.value = [];
   visible.value = false;
 };
-</script> 
+</script>

src/renderer/components/settings/MusicSourceSettings.vue

@@ -34,7 +34,10 @@
       </div>
 
       <!-- GD音乐台设置 -->
-      <div v-if="selectedSources.includes('gdmusic')" class="mt-4 border-t pt-4 border-gray-200 dark:border-gray-700">
+      <div
+        v-if="selectedSources.includes('gdmusic')"
+        class="mt-4 border-t pt-4 border-gray-200 dark:border-gray-700"
+      >
         <h3 class="text-base font-medium mb-2">GD音乐台(music.gdstudio.xyz)设置</h3>
         <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">
           GD音乐台将自动尝试多个音乐平台进行解析，无需额外配置。优先级高于其他解析方式，但是请求可能较慢。感谢（music.gdstudio.xyz）
@@ -45,8 +48,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, defineProps, defineEmits } from 'vue';
+import { defineEmits, defineProps, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import { type Platform } from '@/types/music';
 
 const props = defineProps({
@@ -102,10 +106,9 @@ watch(
 const handleConfirm = () => {
   // 确保至少选择一个音源
   const defaultPlatforms = ['migu', 'kugou', 'pyncmd', 'bilibili'];
-  const valuesToEmit = selectedSources.value.length > 0 
-    ? [...new Set(selectedSources.value)] 
-    : defaultPlatforms;
-  
+  const valuesToEmit =
+    selectedSources.value.length > 0 ? [...new Set(selectedSources.value)] : defaultPlatforms;
+
   emit('update:sources', valuesToEmit);
   visible.value = false;
 };
@@ -115,4 +118,4 @@ const handleCancel = () => {
   selectedSources.value = [...props.sources];
   visible.value = false;
 };
-</script> 
+</script>

src/renderer/components/settings/ProxySettings.vue

@@ -46,10 +46,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, defineProps, defineEmits } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useMessage } from 'naive-ui';
 import type { FormRules } from 'naive-ui';
+import { useMessage } from 'naive-ui';
+import { defineEmits, defineProps, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
   show: {
@@ -92,7 +92,8 @@ const proxyRules: FormRules = {
     validator: (_rule, value) => {
       if (!value) return false;
       // 简单的IP或域名验证
-      const ipRegex = /^(\d{1,3}\.){3}\d{1,3}$|^localhost$|^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
+      const ipRegex =
+        /^(\d{1,3}\.){3}\d{1,3}$|^localhost$|^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
       return ipRegex.test(value);
     }
   },
@@ -142,6 +143,7 @@ const handleProxyConfirm = async () => {
     visible.value = false;
     message.success(t('settings.network.messages.proxySuccess'));
   } catch (err) {
+    console.error('代理设置验证失败:', err);
     message.error(t('settings.network.messages.proxyError'));
   }
 };
@@ -149,4 +151,4 @@ const handleProxyConfirm = async () => {
 const handleCancel = () => {
   visible.value = false;
 };
-</script> 
+</script>

src/renderer/components/settings/ServerSetting.vue

@@ -24,13 +24,20 @@
 
           <n-form-item :label="t('settings.remoteControl.allowedIps')">
             <div class="allowed-ips-container">
-              <div v-for="(_, index) in remoteControlConfig.allowedIps" :key="index" class="ip-item">
-                <n-input v-model:value="remoteControlConfig.allowedIps[index]" :disabled="!remoteControlConfig.enabled" />
-                <n-button 
-                  quaternary 
-                  circle 
-                  type="error" 
-                  :disabled="!remoteControlConfig.enabled" 
+              <div
+                v-for="(_, index) in remoteControlConfig.allowedIps"
+                :key="index"
+                class="ip-item"
+              >
+                <n-input
+                  v-model:value="remoteControlConfig.allowedIps[index]"
+                  :disabled="!remoteControlConfig.enabled"
+                />
+                <n-button
+                  quaternary
+                  circle
+                  type="error"
+                  :disabled="!remoteControlConfig.enabled"
                   @click="removeIp(index)"
                 >
                   <template #icon>
@@ -38,10 +45,10 @@
                   </template>
                 </n-button>
               </div>
-              <n-button 
-                secondary 
-                size="small" 
-                :disabled="!remoteControlConfig.enabled" 
+              <n-button
+                secondary
+                size="small"
+                :disabled="!remoteControlConfig.enabled"
                 @click="addIp"
               >
                 <template #icon>
@@ -57,11 +64,7 @@
 
           <n-form-item>
             <n-space>
-              <n-button 
-                type="primary" 
-                :disabled="!remoteControlConfig.enabled" 
-                @click="saveConfig"
-              >
+              <n-button type="primary" :disabled="!remoteControlConfig.enabled" @click="saveConfig">
                 {{ t('common.save') }}
               </n-button>
               <n-button @click="resetConfig">
@@ -78,15 +81,11 @@
                 </template>
                 <p>{{ t('settings.remoteControl.accessInfo') }}</p>
                 <div class="access-url">
-                  <n-tag type="success">
-                    http://localhost:{{ remoteControlConfig.port }}/
-                  </n-tag>
+                  <n-tag type="success"> http://localhost:{{ remoteControlConfig.port }}/ </n-tag>
                 </div>
                 <div v-if="localIpAddresses.length" class="local-ips">
                   <div v-for="ip in localIpAddresses" :key="ip" class="ip-address">
-                    <n-tag type="info">
-                      http://{{ ip }}:{{ remoteControlConfig.port }}/
-                    </n-tag>
+                    <n-tag type="info"> http://{{ ip }}:{{ remoteControlConfig.port }}/ </n-tag>
                   </div>
                 </div>
               </n-alert>
@@ -99,10 +98,10 @@
 </template>
 
 <script setup lang="ts">
+import { cloneDeep } from 'lodash';
+import { useMessage } from 'naive-ui';
 import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useMessage } from 'naive-ui';
-import { cloneDeep } from 'lodash';
 
 const { t } = useI18n();
 const message = useMessage();
@@ -111,10 +110,10 @@ const message = useMessage();
 const visible = defineModel('visible', { default: false });
 
 // 默认配置
-const defaultConfig:{
-  enabled: boolean,
-  port: number,
-  allowedIps: string[]
+const defaultConfig: {
+  enabled: boolean;
+  port: number;
+  allowedIps: string[];
 } = {
   enabled: false,
   port: 31888,
@@ -122,7 +121,7 @@ const defaultConfig:{
 };
 
 // 远程控制配置
-const remoteControlConfig = ref({...defaultConfig});
+const remoteControlConfig = ref({ ...defaultConfig });
 
 // 本地IP地址列表
 const localIpAddresses = ref<string[]>([]);
@@ -149,10 +148,15 @@ const removeIp = (index: number) => {
 // 保存配置
 const saveConfig = () => {
   // 过滤空IP
-  remoteControlConfig.value.allowedIps = remoteControlConfig.value.allowedIps.filter(ip => ip.trim() !== '');
-  
+  remoteControlConfig.value.allowedIps = remoteControlConfig.value.allowedIps.filter(
+    (ip) => ip.trim() !== ''
+  );
+
   if (window.electron) {
-    window.electron.ipcRenderer.send('update-remote-control-config', cloneDeep(remoteControlConfig.value));
+    window.electron.ipcRenderer.send(
+      'update-remote-control-config',
+      cloneDeep(remoteControlConfig.value)
+    );
     message.success(t('settings.remoteControl.saveSuccess'));
   }
 };
@@ -211,11 +215,11 @@ onMounted(async () => {
 
 .remote-info {
   margin-top: 16px;
-  
+
   .access-url {
     margin-top: 10px;
   }
-  
+
   .local-ips {
     margin-top: 10px;
     display: flex;
@@ -223,4 +227,4 @@ onMounted(async () => {
     gap: 5px;
   }
 }
-</style> 
+</style>

src/renderer/const/bar-const.ts

@@ -44,7 +44,6 @@ export const SEARCH_TYPES = [
   }
 ];
 
-
 export const SEARCH_TYPE = {
   MUSIC: 1, // 单曲
   ALBUM: 10, // 专辑

src/renderer/hooks/IndexDBHook.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { ref } from 'vue';
 
 // 定义表配置的泛型接口

src/renderer/hooks/MusicHook.ts

@@ -1,32 +1,59 @@
 import { cloneDeep } from 'lodash';
 import { createDiscreteApi } from 'naive-ui';
-import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
+import { computed, type ComputedRef,nextTick, onUnmounted, ref, watch } from 'vue';
 
 import { getBilibiliAudioUrl } from '@/api/bilibili';
 import useIndexedDB from '@/hooks/IndexDBHook';
 import { audioService } from '@/services/audioService';
-import pinia, { usePlayerStore } from '@/store';
+import type { usePlayerStore } from '@/store';
+import { getSongUrl } from '@/store/modules/player';
 import type { Artist, ILyricText, SongResult } from '@/type/music';
 import { isElectron } from '@/utils';
 import { getTextColors } from '@/utils/linearColor';
-import { getSongUrl } from '@/store/modules/player';
 
 const windowData = window as any;
 
-const playerStore = usePlayerStore(pinia);
+// 全局 playerStore 引用，通过 initMusicHook 函数注入
+let playerStore: ReturnType<typeof usePlayerStore> | null = null;
+
+// 初始化函数，接受 store 实例
+export const initMusicHook = (store: ReturnType<typeof usePlayerStore>) => {
+  playerStore = store;
+
+  // 创建 computed 属性
+  playMusic = computed(() => getPlayerStore().playMusic as SongResult);
+  artistList = computed(
+    () => (getPlayerStore().playMusic.ar || getPlayerStore().playMusic?.song?.artists) as Artist[]
+  );
+
+  // 在 store 注入后初始化需要 store 的功能
+  setupKeyboardListeners();
+  initProgressAnimation();
+  setupMusicWatchers();
+  setupCorrectionTimeWatcher();
+  setupPlayStateWatcher();
+};
+
+// 获取 playerStore 的辅助函数
+const getPlayerStore = () => {
+  if (!playerStore) {
+    throw new Error('MusicHook not initialized. Call initMusicHook first.');
+  }
+  return playerStore;
+};
 export const lrcArray = ref<ILyricText[]>([]); // 歌词数组
 export const lrcTimeArray = ref<number[]>([]); // 歌词时间数组
 export const nowTime = ref(0); // 当前播放时间
 export const allTime = ref(0); // 总播放时间
 export const nowIndex = ref(0); // 当前播放歌词
 export const currentLrcProgress = ref(0); // 来存储当前歌词的进度
-export const playMusic = computed(() => playerStore.playMusic as SongResult); // 当前播放歌曲
 export const sound = ref<Howl | null>(audioService.getCurrentSound());
 export const isLyricWindowOpen = ref(false); // 新增状态
 export const textColors = ref<any>(getTextColors());
-export const artistList = computed(
-  () => (playerStore.playMusic.ar || playerStore.playMusic?.song?.artists) as Artist[]
-);
+
+// 这些 computed 属性需要在初始化后创建
+export let playMusic: ComputedRef<SongResult>;
+export let artistList: ComputedRef<Artist[]>;
 
 export const musicDB = await useIndexedDB('musicDB', [
   { name: 'music', keyPath: 'id' },
@@ -34,25 +61,29 @@ export const musicDB = await useIndexedDB('musicDB', [
   { name: 'api_cache', keyPath: 'id' }
 ]);
 
-document.onkeyup = (e) => {
-  // 检查事件目标是否是输入框元素
-  const target = e.target as HTMLElement;
-  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
-    return;
-  }
+// 键盘事件处理器，在初始化后设置
+const setupKeyboardListeners = () => {
+  document.onkeyup = (e) => {
+    // 检查事件目标是否是输入框元素
+    const target = e.target as HTMLElement;
+    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+      return;
+    }
 
-  switch (e.code) {
-    case 'Space':
-      if (playerStore.play) {
-        playerStore.setPlayMusic(false);
-        audioService.getCurrentSound()?.pause();
-      } else {
-        playerStore.setPlayMusic(true);
-        audioService.getCurrentSound()?.play();
-      }
-      break;
-    default:
-  }
+    const store = getPlayerStore();
+    switch (e.code) {
+      case 'Space':
+        if (store.play) {
+          store.setPlayMusic(false);
+          audioService.getCurrentSound()?.pause();
+        } else {
+          store.setPlayMusic(true);
+          audioService.getCurrentSound()?.play();
+        }
+        break;
+      default:
+    }
+  };
 };
 
 const { message } = createDiscreteApi(['message']);
@@ -72,7 +103,7 @@ const stopProgressAnimation = () => {
 
 // 全局更新函数
 const updateProgress = () => {
-  if (!playerStore.play) {
+  if (!getPlayerStore().play) {
     stopProgressAnimation();
     return;
   }
@@ -120,11 +151,11 @@ const updateProgress = () => {
         Math.floor(currentTime) !== Math.floor(lastSavedTime.value)
       ) {
         lastSavedTime.value = currentTime;
-        if (playerStore.playMusic && playerStore.playMusic.id) {
+        if (getPlayerStore().playMusic && getPlayerStore().playMusic.id) {
           localStorage.setItem(
             'playProgress',
             JSON.stringify({
-              songId: playerStore.playMusic.id,
+              songId: getPlayerStore().playMusic.id,
               progress: currentTime
             })
           );
@@ -175,7 +206,7 @@ const initProgressAnimation = () => {
   let debounceTimer: any = null;
 
   watch(
-    () => playerStore.play,
+    () => getPlayerStore().play,
     (newIsPlaying) => {
       console.log('播放状态变化:', newIsPlaying);
 
@@ -217,7 +248,7 @@ const initProgressAnimation = () => {
   // 监听当前歌词索引变化
   watch(nowIndex, () => {
     currentLrcProgress.value = 0;
-    if (playerStore.play) {
+    if (getPlayerStore().play) {
       startProgressAnimation();
     }
   });
@@ -225,45 +256,45 @@ const initProgressAnimation = () => {
   // 监听音频对象变化
   watch(sound, (newSound) => {
     console.log('sound 对象变化:', !!newSound);
-    if (newSound && playerStore.play) {
+    if (newSound && getPlayerStore().play) {
       startProgressAnimation();
     }
   });
 };
 
-// 初始化进度动画
-initProgressAnimation();
+// 设置音乐相关的监听器
+const setupMusicWatchers = () => {
+  const store = getPlayerStore();
 
-// 移除对 playerStore.playMusicUrl 的监听，因为播放逻辑已经在 player.ts 中处理
-// 保留 watch 对 playerStore.playMusic 的监听以更新歌词数据
+  // 监听 playerStore.playMusic 的变化以更新歌词数据
+  watch(
+    () => store.playMusic,
+    () => {
+      nextTick(async () => {
+        console.log('歌曲切换，更新歌词数据');
+        // 更新歌词数据
+        lrcArray.value = playMusic.value.lyric?.lrcArray || [];
+        lrcTimeArray.value = playMusic.value.lyric?.lrcTimeArray || [];
 
-watch(
-  () => playerStore.playMusic,
-  () => {
-    nextTick(async () => {
-      console.log('歌曲切换，更新歌词数据');
-      // 更新歌词数据
-      lrcArray.value = playMusic.value.lyric?.lrcArray || [];
-      lrcTimeArray.value = playMusic.value.lyric?.lrcTimeArray || [];
-
-      // 当歌词数据更新时，如果歌词窗口打开，则发送数据
-      if (isElectron && isLyricWindowOpen.value) {
-        console.log('歌词窗口已打开，同步最新歌词数据');
-        // 不管歌词数组是否为空，都发送最新数据
-        sendLyricToWin();
-
-        // 再次延迟发送，确保歌词窗口已完全加载
-        setTimeout(() => {
+        // 当歌词数据更新时，如果歌词窗口打开，则发送数据
+        if (isElectron && isLyricWindowOpen.value) {
+          console.log('歌词窗口已打开，同步最新歌词数据');
+          // 不管歌词数组是否为空，都发送最新数据
           sendLyricToWin();
-        }, 500);
-      }
-    });
-  },
-  {
-    deep: true,
-    immediate: true
-  }
-);
+
+          // 再次延迟发送，确保歌词窗口已完全加载
+          setTimeout(() => {
+            sendLyricToWin();
+          }, 500);
+        }
+      });
+    },
+    {
+      deep: true,
+      immediate: true
+    }
+  );
+};
 
 const setupAudioListeners = () => {
   let interval: any = null;
@@ -331,9 +362,9 @@ const setupAudioListeners = () => {
 
   // 监听播放
   audioService.on('play', () => {
-    playerStore.setPlayMusic(true);
+    getPlayerStore().setPlayMusic(true);
     if (isElectron) {
-      window.api.sendSong(cloneDeep(playerStore.playMusic));
+      window.api.sendSong(cloneDeep(getPlayerStore().playMusic));
     }
     clearInterval();
     interval = window.setInterval(() => {
@@ -383,7 +414,7 @@ const setupAudioListeners = () => {
   // 监听暂停
   audioService.on('pause', () => {
     console.log('音频暂停事件触发');
-    playerStore.setPlayMusic(false);
+    getPlayerStore().setPlayMusic(false);
     clearInterval();
     if (isElectron && isLyricWindowOpen.value) {
       sendLyricToWin();
@@ -400,17 +431,17 @@ const setupAudioListeners = () => {
       }
 
       // 重新播放当前歌曲
-      if (playerStore.playMusicUrl && playMusic.value) {
-        const newSound = await audioService.play(playerStore.playMusicUrl, playMusic.value);
+      if (getPlayerStore().playMusicUrl && playMusic.value) {
+        const newSound = await audioService.play(getPlayerStore().playMusicUrl, playMusic.value);
         sound.value = newSound as Howl;
         setupAudioListeners();
       } else {
         console.error('No music URL or playMusic data available');
-        playerStore.nextPlay();
+        getPlayerStore().nextPlay();
       }
     } catch (error) {
       console.error('Error replaying song:', error);
-      playerStore.nextPlay();
+      getPlayerStore().nextPlay();
     }
   };
 
@@ -419,36 +450,36 @@ const setupAudioListeners = () => {
     console.log('音频播放结束事件触发');
     clearInterval();
 
-    if (playerStore.playMode === 1) {
+    if (getPlayerStore().playMode === 1) {
       // 单曲循环模式
       if (sound.value) {
         replayMusic();
       }
-    } else if (playerStore.playMode === 2) {
+    } else if (getPlayerStore().playMode === 2) {
       // 随机播放模式
 
-      if (playerStore.playList.length <= 1) {
+      if (getPlayerStore().playList.length <= 1) {
         replayMusic();
       } else {
         let randomIndex;
         do {
-          randomIndex = Math.floor(Math.random() * playerStore.playList.length);
-        } while (randomIndex === playerStore.playListIndex && playerStore.playList.length > 1);
-        playerStore.playListIndex = randomIndex;
-        playerStore.setPlay(playerStore.playList[randomIndex]);
+          randomIndex = Math.floor(Math.random() * getPlayerStore().playList.length);
+        } while (randomIndex === getPlayerStore().playListIndex && getPlayerStore().playList.length > 1);
+        getPlayerStore().playListIndex = randomIndex;
+        getPlayerStore().setPlay(getPlayerStore().playList[randomIndex]);
       }
     } else {
       // 列表循环模式
-      playerStore.nextPlay();
+      getPlayerStore().nextPlay();
     }
   });
 
   audioService.on('previoustrack', () => {
-    playerStore.prevPlay();
+    getPlayerStore().prevPlay();
   });
 
   audioService.on('nexttrack', () => {
-    playerStore.nextPlay();
+    getPlayerStore().nextPlay();
   });
 
   return clearInterval;
@@ -464,11 +495,11 @@ export const pause = () => {
     try {
       // 保存当前播放进度
       const currentTime = currentSound.seek() as number;
-      if (playerStore.playMusic && playerStore.playMusic.id) {
+      if (getPlayerStore().playMusic && getPlayerStore().playMusic.id) {
         localStorage.setItem(
           'playProgress',
           JSON.stringify({
-            songId: playerStore.playMusic.id,
+            songId: getPlayerStore().playMusic.id,
             progress: currentTime
           })
         );
@@ -503,15 +534,18 @@ loadCorrectionMap();
 // 歌词矫正时间，当前歌曲
 export const correctionTime = ref(0);
 
-// 切歌时自动读取矫正时间
-watch(
-  () => playMusic.value?.id,
-  (id) => {
-    if (!id) return;
-    correctionTime.value = correctionTimeMap.value[id] ?? 0;
-  },
-  { immediate: true }
-);
+// 设置歌词矫正时间的监听器
+const setupCorrectionTimeWatcher = () => {
+  // 切歌时自动读取矫正时间
+  watch(
+    () => playMusic.value?.id,
+    (id) => {
+      if (!id) return;
+      correctionTime.value = correctionTimeMap.value[id] ?? 0;
+    },
+    { immediate: true }
+  );
+};
 
 /**
  * 调整歌词矫正时间（每首歌独立）
@@ -557,7 +591,7 @@ const currentLrcTiming = computed(() => {
 export const getLrcStyle = (index: number) => {
   const currentTime = nowTime.value + correctionTime.value;
   const start = lrcTimeArray.value[index];
-  const end = lrcTimeArray.value[index + 1] ?? (start + 1);
+  const end = lrcTimeArray.value[index + 1] ?? start + 1;
 
   if (currentTime >= start && currentTime < end) {
     // 当前句，显示进度
@@ -638,7 +672,7 @@ export const sendLyricToWin = () => {
         nowTime: nowTime.value,
         startCurrentTime: lrcTimeArray.value[nowIndex] || 0,
         nextTime: lrcTimeArray.value[nowIndex + 1] || 0,
-        isPlay: playerStore.play,
+        isPlay: getPlayerStore().play,
         lrcArray: lrcArray.value,
         lrcTimeArray: lrcTimeArray.value,
         allTime: allTime.value,
@@ -657,7 +691,7 @@ export const sendLyricToWin = () => {
         nowTime: nowTime.value,
         startCurrentTime: 0,
         nextTime: 0,
-        isPlay: playerStore.play,
+        isPlay: getPlayerStore().play,
         lrcArray: [{ text: '当前歌曲暂无歌词', trText: '' }],
         lrcTimeArray: [0],
         allTime: allTime.value,
@@ -682,14 +716,14 @@ const startLyricSync = () => {
 
   // 每秒同步一次歌词数据
   lyricSyncInterval = setInterval(() => {
-    if (isElectron && isLyricWindowOpen.value && playerStore.play && playMusic.value?.id) {
+    if (isElectron && isLyricWindowOpen.value && getPlayerStore().play && playMusic.value?.id) {
       // 发送当前播放进度的更新
       try {
         const updateData = {
           type: 'update',
           nowIndex: getLrcIndex(nowTime.value),
           nowTime: nowTime.value,
-          isPlay: playerStore.play
+          isPlay: getPlayerStore().play
         };
         window.api.sendLyric(JSON.stringify(updateData));
       } catch (error) {
@@ -735,7 +769,7 @@ export const openLyric = () => {
         nowTime: nowTime.value,
         startCurrentTime: 0,
         nextTime: 0,
-        isPlay: playerStore.play,
+        isPlay: getPlayerStore().play,
         lrcArray: [{ text: '加载歌词中...', trText: '' }],
         lrcTimeArray: [0],
         allTime: allTime.value,
@@ -771,25 +805,28 @@ export const closeLyric = () => {
   stopLyricSync();
 };
 
-// 在组件挂载时设置对播放状态的监听
-watch(
-  () => playerStore.play,
-  (isPlaying) => {
-    // 如果歌词窗口打开，根据播放状态控制同步
-    if (isElectron && isLyricWindowOpen.value) {
-      if (isPlaying) {
-        startLyricSync();
-      } else {
-        // 如果暂停播放，发送一次暂停状态的更新
-        const pauseData = {
-          type: 'update',
-          isPlay: false
-        };
-        window.api.sendLyric(JSON.stringify(pauseData));
+// 设置播放状态监听器
+const setupPlayStateWatcher = () => {
+  // 在组件挂载时设置对播放状态的监听
+  watch(
+    () => getPlayerStore().play,
+    (isPlaying) => {
+      // 如果歌词窗口打开，根据播放状态控制同步
+      if (isElectron && isLyricWindowOpen.value) {
+        if (isPlaying) {
+          startLyricSync();
+        } else {
+          // 如果暂停播放，发送一次暂停状态的更新
+          const pauseData = {
+            type: 'update',
+            isPlay: false
+          };
+          window.api.sendLyric(JSON.stringify(pauseData));
+        }
       }
     }
-  }
-);
+  );
+};
 
 // 在组件卸载时清理资源
 onUnmounted(() => {
@@ -801,20 +838,20 @@ if (isElectron) {
   windowData.electron.ipcRenderer.on('lyric-control-back', (_, command: string) => {
     switch (command) {
       case 'playpause':
-        if (playerStore.play) {
-          playerStore.setPlayMusic(false);
+        if (getPlayerStore().play) {
+          getPlayerStore().setPlayMusic(false);
           audioService.getCurrentSound()?.pause();
         } else {
-          playerStore.setPlayMusic(true);
+          getPlayerStore().setPlayMusic(true);
 
           audioService.getCurrentSound()?.play();
         }
         break;
       case 'prev':
-        playerStore.prevPlay();
+        getPlayerStore().prevPlay();
         break;
       case 'next':
-        playerStore.nextPlay();
+        getPlayerStore().nextPlay();
         break;
       case 'close':
         isLyricWindowOpen.value = false; // 确保状态更新
@@ -830,7 +867,7 @@ if (isElectron) {
 export const initAudioListeners = async () => {
   try {
     // 确保有正在播放的音乐
-    if (!playerStore.playMusic || !playerStore.playMusic.id) {
+    if (!getPlayerStore().playMusic || !getPlayerStore().playMusic.id) {
       console.log('没有正在播放的音乐，跳过音频监听器初始化');
       return;
     }
@@ -905,7 +942,7 @@ audioService.on('url_expired', async (expiredTrack) => {
 
         // 更新存储
         (expiredTrack as any).playMusicUrl = newUrl;
-        playerStore.playMusicUrl = newUrl;
+        getPlayerStore().playMusicUrl = newUrl;
 
         // 重新播放并设置进度
         const newSound = await audioService.play(newUrl, expiredTrack);
@@ -919,9 +956,9 @@ audioService.on('url_expired', async (expiredTrack) => {
         }
 
         // 如果之前是播放状态，继续播放
-        if (playerStore.play) {
+        if (getPlayerStore().play) {
           newSound.play();
-          playerStore.setIsPlay(true);
+          getPlayerStore().setIsPlay(true);
         }
 
         message.success('已自动恢复播放');
@@ -933,7 +970,6 @@ audioService.on('url_expired', async (expiredTrack) => {
       // 处理网易云音乐，重新获取URL
       console.log('重新获取网易云音乐URL');
       try {
-        
         const newUrl = await getSongUrl(expiredTrack.id, expiredTrack as any);
 
         if (newUrl) {
@@ -941,7 +977,7 @@ audioService.on('url_expired', async (expiredTrack) => {
 
           // 更新存储
           (expiredTrack as any).playMusicUrl = newUrl;
-          playerStore.playMusicUrl = newUrl;
+          getPlayerStore().playMusicUrl = newUrl;
 
           // 重新播放并设置进度
           const newSound = await audioService.play(newUrl, expiredTrack);
@@ -955,9 +991,9 @@ audioService.on('url_expired', async (expiredTrack) => {
           }
 
           // 如果之前是播放状态，继续播放
-          if (playerStore.play) {
+          if (getPlayerStore().play) {
             newSound.play();
-            playerStore.setIsPlay(true);
+            getPlayerStore().setIsPlay(true);
           }
 
           message.success('已自动恢复播放');
@@ -982,16 +1018,16 @@ window.addEventListener('audio-ready', ((event: CustomEvent) => {
     if (newSound) {
       // 更新本地 sound 引用
       sound.value = newSound as Howl;
-      
+
       // 设置音频监听器
       setupAudioListeners();
-      
+
       // 获取当前播放位置并更新显示
       const currentPosition = newSound.seek() as number;
       if (typeof currentPosition === 'number' && !Number.isNaN(currentPosition)) {
         nowTime.value = currentPosition;
       }
-      
+
       console.log('音频就绪，已设置监听器并更新进度显示');
     }
   } catch (error) {

src/renderer/hooks/useDownload.ts

@@ -1,7 +1,7 @@
 import { cloneDeep } from 'lodash';
+import { useMessage } from 'naive-ui';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useMessage } from 'naive-ui';
 
 import { getSongUrl } from '@/store/modules/player';
 import type { SongResult } from '@/type/music';
@@ -13,23 +13,23 @@ const ipcRenderer = isElectron ? window.electron.ipcRenderer : null;
 const createDownloadManager = () => {
   // 正在下载的文件集合
   const activeDownloads = new Set<string>();
-  
+
   // 已经发送了通知的文件集合（避免重复通知）
   const notifiedDownloads = new Set<string>();
-  
+
   // 事件监听器是否已初始化
   let isInitialized = false;
-  
+
   // 监听器引用（用于清理）
   let completeListener: ((event: any, data: any) => void) | null = null;
   let errorListener: ((event: any, data: any) => void) | null = null;
-  
+
   return {
     // 添加下载
     addDownload: (filename: string) => {
       activeDownloads.add(filename);
     },
-    
+
     // 移除下载
     removeDownload: (filename: string) => {
       activeDownloads.delete(filename);
@@ -38,98 +38,100 @@ const createDownloadManager = () => {
         notifiedDownloads.delete(filename);
       }, 5000);
     },
-    
+
     // 标记文件已通知
     markNotified: (filename: string) => {
       notifiedDownloads.add(filename);
     },
-    
+
     // 检查文件是否已通知
     isNotified: (filename: string) => {
       return notifiedDownloads.has(filename);
     },
-    
+
     // 清理所有下载
     clearDownloads: () => {
       activeDownloads.clear();
       notifiedDownloads.clear();
     },
-    
+
     // 初始化事件监听器
     initEventListeners: (message: any, t: any) => {
       if (isInitialized) return;
-      
+
       // 移除可能存在的旧监听器
       if (completeListener) {
         ipcRenderer?.removeListener('music-download-complete', completeListener);
       }
-      
+
       if (errorListener) {
         ipcRenderer?.removeListener('music-download-error', errorListener);
       }
-      
+
       // 创建新的监听器
       completeListener = (_event, data) => {
         if (!data.filename || !activeDownloads.has(data.filename)) return;
-        
+
         // 如果该文件已经通知过，则跳过
         if (notifiedDownloads.has(data.filename)) return;
-        
+
         // 标记为已通知
         notifiedDownloads.add(data.filename);
-        
+
         // 从活动下载移除
         activeDownloads.delete(data.filename);
       };
-      
+
       errorListener = (_event, data) => {
         if (!data.filename || !activeDownloads.has(data.filename)) return;
-        
+
         // 如果该文件已经通知过，则跳过
         if (notifiedDownloads.has(data.filename)) return;
-        
+
         // 标记为已通知
         notifiedDownloads.add(data.filename);
-        
+
         // 显示失败通知
-        message.error(t('songItem.message.downloadFailed', { 
-          filename: data.filename,
-          error: data.error || '未知错误'
-        }));
-        
+        message.error(
+          t('songItem.message.downloadFailed', {
+            filename: data.filename,
+            error: data.error || '未知错误'
+          })
+        );
+
         // 从活动下载移除
         activeDownloads.delete(data.filename);
       };
-      
+
       // 添加监听器
       ipcRenderer?.on('music-download-complete', completeListener);
       ipcRenderer?.on('music-download-error', errorListener);
-      
+
       isInitialized = true;
     },
-    
+
     // 清理事件监听器
     cleanupEventListeners: () => {
       if (!isInitialized) return;
-      
+
       if (completeListener) {
         ipcRenderer?.removeListener('music-download-complete', completeListener);
         completeListener = null;
       }
-      
+
       if (errorListener) {
         ipcRenderer?.removeListener('music-download-error', errorListener);
         errorListener = null;
       }
-      
+
       isInitialized = false;
     },
-    
+
     // 获取活跃下载数量
     getActiveDownloadCount: () => {
       return activeDownloads.size;
     },
-    
+
     // 检查是否有特定文件正在下载
     hasDownload: (filename: string) => {
       return activeDownloads.has(filename);
@@ -170,7 +172,7 @@ export const useDownload = () => {
       // 构建文件名
       const artistNames = (song.ar || song.song?.artists)?.map((a) => a.name).join(',');
       const filename = `${song.name} - ${artistNames}`;
-      
+
       // 检查是否已在下载
       if (downloadManager.hasDownload(filename)) {
         isDownloading.value = false;
@@ -182,7 +184,7 @@ export const useDownload = () => {
 
       const songData = cloneDeep(song);
       songData.ar = songData.ar || songData.song?.artists;
-      
+
       // 发送下载请求
       ipcRenderer?.send('download-music', {
         url: typeof musicUrl === 'string' ? musicUrl : musicUrl.url,
@@ -195,7 +197,7 @@ export const useDownload = () => {
       });
 
       message.success(t('songItem.message.downloadQueued'));
-      
+
       // 简化的监听逻辑，基本通知由全局监听器处理
       setTimeout(() => {
         isDownloading.value = false;
@@ -230,7 +232,7 @@ export const useDownload = () => {
       let successCount = 0;
       let failCount = 0;
       const totalCount = songs.length;
-      
+
       // 下载进度追踪
       const trackProgress = () => {
         if (successCount + failCount === totalCount) {
@@ -260,36 +262,36 @@ export const useDownload = () => {
           trackProgress();
           return;
         }
-        
+
         const songData = cloneDeep(song);
         const filename = `${song.name} - ${(song.ar || song.song?.artists)?.map((a) => a.name).join(',')}`;
-        
+
         // 检查是否已在下载
         if (downloadManager.hasDownload(filename)) {
           failCount++;
           trackProgress();
           return;
         }
-        
+
         // 添加到活动下载集合
         downloadManager.addDownload(filename);
-        
+
         const songInfo = {
           ...songData,
           ar: songData.ar || songData.song?.artists,
           downloadTime: Date.now()
         };
-        
+
         ipcRenderer?.send('download-music', {
           url,
           filename,
           songInfo,
           type
         });
-        
+
         successCount++;
       });
-      
+
       // 所有下载开始后，检查进度
       trackProgress();
     } catch (error) {
@@ -305,4 +307,4 @@ export const useDownload = () => {
     downloadMusic,
     batchDownloadMusic
   };
-};
+};

src/renderer/hooks/useSongItem.ts

@@ -1,30 +1,29 @@
+import { useDialog, useMessage } from 'naive-ui';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
 import { usePlayerStore } from '@/store';
 import type { SongResult } from '@/type/music';
-import { computed, ref } from 'vue';
 import { getImgUrl } from '@/utils';
 import { getImageBackground } from '@/utils/linearColor';
-import { useMessage, useDialog } from 'naive-ui';
-import { useI18n } from 'vue-i18n';
-import { useDownload } from './useDownload';
-import { useArtist } from './useArtist';
 
-export function useSongItem(props: {
-  item: SongResult;
-  canRemove?: boolean;
-}) {
+import { useArtist } from './useArtist';
+import { useDownload } from './useDownload';
+
+export function useSongItem(props: { item: SongResult; canRemove?: boolean }) {
   const { t } = useI18n();
   const playerStore = usePlayerStore();
   const message = useMessage();
   const dialog = useDialog();
   const { downloadMusic } = useDownload();
   const { navigateToArtist } = useArtist();
-  
+
   // 状态变量
   const showDropdown = ref(false);
   const dropdownX = ref(0);
   const dropdownY = ref(0);
   const isHovering = ref(false);
-  
+
   // 计算属性
   const play = computed(() => playerStore.isPlay);
   const playMusic = computed(() => playerStore.playMusic);
@@ -32,18 +31,20 @@ export function useSongItem(props: {
     () => playMusic.value.id === props.item.id && playMusic.value.playLoading
   );
   const isPlaying = computed(() => playMusic.value.id === props.item.id);
-  
+
   // 收藏与不喜欢状态
   const isFavorite = computed(() => {
-    const numericId = typeof props.item.id === 'string' ? parseInt(props.item.id, 10) : props.item.id;
+    const numericId =
+      typeof props.item.id === 'string' ? parseInt(props.item.id, 10) : props.item.id;
     return playerStore.favoriteList.includes(numericId);
   });
-  
+
   const isDislike = computed(() => {
-    const numericId = typeof props.item.id === 'string' ? parseInt(props.item.id, 10) : props.item.id;
+    const numericId =
+      typeof props.item.id === 'string' ? parseInt(props.item.id, 10) : props.item.id;
     return playerStore.dislikeList.includes(numericId);
   });
-  
+
   // 获取艺术家列表
   const artists = computed(() => {
     return (props.item.ar || props.item.song?.artists)?.slice(0, 4) || [];
@@ -52,12 +53,12 @@ export function useSongItem(props: {
   // 处理图片加载
   const handleImageLoad = async (imageElement: HTMLImageElement) => {
     if (!imageElement) return;
-    
+
     const { backgroundColor, primaryColor } = await getImageBackground(imageElement);
     props.item.backgroundColor = backgroundColor;
     props.item.primaryColor = primaryColor;
   };
-  
+
   // 播放音乐
   const playMusicEvent = async (item: SongResult) => {
     try {
@@ -71,11 +72,12 @@ export function useSongItem(props: {
       return false;
     }
   };
-  
+
   // 切换收藏状态
   const toggleFavorite = async (e: Event) => {
     e && e.stopPropagation();
-    const numericId = typeof props.item.id === 'string' ? parseInt(props.item.id, 10) : props.item.id;
+    const numericId =
+      typeof props.item.id === 'string' ? parseInt(props.item.id, 10) : props.item.id;
 
     if (isFavorite.value) {
       playerStore.removeFromFavorite(numericId);
@@ -83,7 +85,7 @@ export function useSongItem(props: {
       playerStore.addToFavorite(numericId);
     }
   };
-  
+
   // 切换不喜欢状态
   const toggleDislike = async (e: Event) => {
     e && e.stopPropagation();
@@ -91,7 +93,7 @@ export function useSongItem(props: {
       playerStore.removeFromDislikeList(props.item.id);
       return;
     }
-    
+
     dialog.warning({
       title: t('songItem.dialog.dislike.title'),
       content: t('songItem.dialog.dislike.content'),
@@ -102,20 +104,20 @@ export function useSongItem(props: {
       }
     });
   };
-  
+
   // 添加到下一首播放
   const handlePlayNext = () => {
     playerStore.addToNextPlay(props.item);
     message.success(t('songItem.message.addedToNextPlay'));
   };
-  
+
   // 获取歌曲时长
   const getDuration = (item: SongResult): number => {
     if (item.duration) return item.duration;
     if (typeof item.dt === 'number') return item.dt;
     return 0;
   };
-  
+
   // 格式化时长
   const formatDuration = (ms: number): string => {
     if (!ms) return '--:--';
@@ -124,7 +126,7 @@ export function useSongItem(props: {
     const seconds = totalSeconds % 60;
     return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
   };
-  
+
   // 处理右键菜单
   const handleContextMenu = (e: MouseEvent) => {
     e.preventDefault();
@@ -132,7 +134,7 @@ export function useSongItem(props: {
     dropdownX.value = e.clientX;
     dropdownY.value = e.clientY;
   };
-  
+
   // 处理菜单点击
   const handleMenuClick = (e: MouseEvent) => {
     e.preventDefault();
@@ -140,17 +142,17 @@ export function useSongItem(props: {
     dropdownX.value = e.clientX;
     dropdownY.value = e.clientY;
   };
-  
+
   // 处理艺术家点击
   const handleArtistClick = (id: number) => {
     navigateToArtist(id);
   };
-  
+
   // 鼠标悬停处理
   const handleMouseEnter = () => {
     isHovering.value = true;
   };
-  
+
   const handleMouseLeave = () => {
     isHovering.value = false;
   };
@@ -165,7 +167,7 @@ export function useSongItem(props: {
     isDislike,
     artists,
     showDropdown,
-    dropdownX, 
+    dropdownX,
     dropdownY,
     isHovering,
     playerStore,
@@ -185,4 +187,4 @@ export function useSongItem(props: {
     handleMouseLeave,
     downloadMusic
   };
-} 
+}

src/renderer/hooks/useZoom.ts

@@ -9,10 +9,10 @@ export function useZoom() {
   const MIN_ZOOM = 0.5;
   const MAX_ZOOM = 1.5;
   const ZOOM_STEP = 0.05; // 5%的步长
-  
+
   // 当前缩放因子
   const zoomFactor = ref(1);
-  
+
   // 初始化获取当前缩放比例
   const initZoomFactor = async () => {
     try {
@@ -22,35 +22,35 @@ export function useZoom() {
       console.error('获取缩放比例失败:', error);
     }
   };
-  
+
   // 增加缩放比例，保证100%为节点
   const increaseZoom = () => {
     let newZoom;
-    
+
     // 如果当前缩放低于100%并且增加后会超过100%，则直接设为100%
     if (zoomFactor.value < 1.0 && zoomFactor.value + ZOOM_STEP > 1.0) {
       newZoom = 1.0; // 精确设置为100%
     } else {
       newZoom = Math.min(MAX_ZOOM, Math.round((zoomFactor.value + ZOOM_STEP) * 20) / 20);
     }
-    
+
     setZoomFactor(newZoom);
   };
-  
+
   // 减少缩放比例，保证100%为节点
   const decreaseZoom = () => {
     let newZoom;
-    
+
     // 如果当前缩放大于100%并且减少后会低于100%，则直接设为100%
     if (zoomFactor.value > 1.0 && zoomFactor.value - ZOOM_STEP < 1.0) {
       newZoom = 1.0; // 精确设置为100%
     } else {
       newZoom = Math.max(MIN_ZOOM, Math.round((zoomFactor.value - ZOOM_STEP) * 20) / 20);
     }
-    
+
     setZoomFactor(newZoom);
   };
-  
+
   // 重置缩放比例到系统建议值
   const resetZoom = async () => {
     try {
@@ -59,18 +59,18 @@ export function useZoom() {
       console.error('重置缩放比例失败:', error);
     }
   };
-  
+
   // 设置为100%标准缩放
   const setZoom100 = () => {
     setZoomFactor(1.0);
   };
-  
+
   // 设置缩放比例
   const setZoomFactor = (zoom: number) => {
     window.ipcRenderer.send('set-content-zoom', zoom);
     zoomFactor.value = zoom;
   };
-  
+
   // 检查是否为100%缩放
   const isZoom100 = () => {
     return Math.abs(zoomFactor.value - 1.0) < 0.001;
@@ -89,4 +89,4 @@ export function useZoom() {
     MAX_ZOOM,
     ZOOM_STEP
   };
-} 
+}

src/renderer/layout/AppLayout.vue

@@ -9,7 +9,11 @@
           <!-- 搜索栏 -->
           <search-bar />
           <!-- 主页面路由 -->
-          <div class="main-content" :native-scrollbar="false" :class="{'mobile-content': !shouldShowMobileMenu}">
+          <div
+            class="main-content"
+            :native-scrollbar="false"
+            :class="{ 'mobile-content': !shouldShowMobileMenu }"
+          >
             <router-view
               v-slot="{ Component }"
               class="main-page"
@@ -41,7 +45,7 @@
     <install-app-modal v-if="!isElectron"></install-app-modal>
     <update-modal v-if="isElectron" />
     <playlist-drawer v-model="showPlaylistDrawer" :song-id="currentSongId" />
-    <SleepTimerTop v-if="!isMobile"/>
+    <sleep-timer-top v-if="!isMobile" />
     <!-- 下载管理抽屉 -->
     <download-drawer
       v-if="
@@ -64,24 +68,24 @@ import DownloadDrawer from '@/components/common/DownloadDrawer.vue';
 import InstallAppModal from '@/components/common/InstallAppModal.vue';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import UpdateModal from '@/components/common/UpdateModal.vue';
+import SleepTimerTop from '@/components/player/SleepTimerTop.vue';
 import homeRouter from '@/router/home';
 import otherRouter from '@/router/other';
 import { useMenuStore } from '@/store/modules/menu';
 import { usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
 import { isElectron, isMobile } from '@/utils';
-import SleepTimerTop from '@/components/player/SleepTimerTop.vue';
 
 const keepAliveInclude = computed(() => {
   const allRoutes = [...homeRouter, ...otherRouter];
-  
+
   return allRoutes
     .filter((item) => {
       return item.meta?.keepAlive;
     })
     .map((item) => {
-      return typeof item.name === 'string' 
-        ? item.name.charAt(0).toUpperCase() + item.name.slice(1) 
+      return typeof item.name === 'string'
+        ? item.name.charAt(0).toUpperCase() + item.name.slice(1)
         : '';
     })
     .filter(Boolean);
@@ -92,7 +96,9 @@ const PlayBar = defineAsyncComponent(() => import('@/components/player/PlayBar.v
 const MobilePlayBar = defineAsyncComponent(() => import('@/components/player/MobilePlayBar.vue'));
 const SearchBar = defineAsyncComponent(() => import('./components/SearchBar.vue'));
 const TitleBar = defineAsyncComponent(() => import('./components/TitleBar.vue'));
-const PlayingListDrawer = defineAsyncComponent(() => import('@/components/player/PlayingListDrawer.vue'));
+const PlayingListDrawer = defineAsyncComponent(
+  () => import('@/components/player/PlayingListDrawer.vue')
+);
 const PlaylistDrawer = defineAsyncComponent(() => import('@/components/common/PlaylistDrawer.vue'));
 
 const playerStore = usePlayerStore();

src/renderer/layout/components/AppMenu.vue

@@ -12,8 +12,17 @@
           <n-tooltip :delay="200" :disabled="isText || isMobile" placement="bottom">
             <template #trigger>
               <router-link class="app-menu-item-link" :to="item.path">
-                <i class="iconfont app-menu-item-icon" :style="iconStyle(index)" :class="item.meta.icon"></i>
-                <span v-if="isText" class="app-menu-item-text ml-3" :class="isChecked(index) ? 'text-green-500' : ''">{{ t(item.meta.title) }}</span>
+                <i
+                  class="iconfont app-menu-item-icon"
+                  :style="iconStyle(index)"
+                  :class="item.meta.icon"
+                ></i>
+                <span
+                  v-if="isText"
+                  class="app-menu-item-text ml-3"
+                  :class="isChecked(index) ? 'text-green-500' : ''"
+                  >{{ t(item.meta.title) }}</span
+                >
               </router-link>
             </template>
             <div v-if="!isText">{{ t(item.meta.title) }}</div>
@@ -25,9 +34,9 @@
 </template>
 
 <script lang="ts" setup>
-import { useRoute } from 'vue-router';
 import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 
 import icon from '@/assets/icon.png';
 import { isMobile } from '@/utils';

src/renderer/layout/components/SearchBar.vue

@@ -19,7 +19,7 @@
           <n-dropdown trigger="hover" :options="searchTypeOptions" @select="selectSearchType">
             <div class="w-20 px-3 flex justify-between items-center">
               <div>
-                {{ searchTypeOptions.find(item => item.key === searchStore.searchType)?.label }}
+                {{ searchTypeOptions.find((item) => item.key === searchStore.searchType)?.label }}
               </div>
               <i class="iconfont icon-xiasanjiaoxing"></i>
             </div>
@@ -64,16 +64,18 @@
           </div>
           <div class="menu-item" v-if="isElectron">
             <i class="iconfont ri-zoom-in-line"></i>
-            <span>{{ t('comp.searchBar.zoom')}}</span>
+            <span>{{ t('comp.searchBar.zoom') }}</span>
             <div class="zoom-controls ml-auto">
               <n-button quaternary circle size="tiny" @click="decreaseZoom">
                 <i class="ri-subtract-line"></i>
               </n-button>
               <n-tooltip trigger="hover">
                 <template #trigger>
-                  <span class="zoom-value" :class="{'zoom-100': isZoom100()}" @click="resetZoom">{{ Math.round(zoomFactor * 100) }}%</span>
+                  <span class="zoom-value" :class="{ 'zoom-100': isZoom100() }" @click="resetZoom"
+                    >{{ Math.round(zoomFactor * 100) }}%</span
+                  >
                 </template>
-                {{ isZoom100() ? t('comp.searchBar.zoom100'): t('comp.searchBar.resetZoom')}}
+                {{ isZoom100() ? t('comp.searchBar.zoom100') : t('comp.searchBar.resetZoom') }}
               </n-tooltip>
               <n-button quaternary circle size="tiny" @click="increaseZoom">
                 <i class="ri-add-line"></i>
@@ -126,13 +128,14 @@
 import { computed, onMounted, ref, watch, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+
 import { getSearchKeyword } from '@/api/home';
 import { getUserDetail } from '@/api/login';
 import alipay from '@/assets/alipay.png';
 import wechat from '@/assets/wechat.png';
 import Coffee from '@/components/Coffee.vue';
-import { useZoom } from '@/hooks/useZoom';
 import { SEARCH_TYPES, USER_SET_OPTIONS } from '@/const/bar-const';
+import { useZoom } from '@/hooks/useZoom';
 import { useSearchStore } from '@/store/modules/search';
 import { useSettingsStore } from '@/store/modules/settings';
 import { useUserStore } from '@/store/modules/user';
@@ -149,14 +152,7 @@ const userSetOptions = ref(USER_SET_OPTIONS);
 const { t, locale } = useI18n();
 
 // 使用缩放hook
-const { 
-  zoomFactor, 
-  initZoomFactor, 
-  increaseZoom, 
-  decreaseZoom, 
-  resetZoom, 
-  isZoom100 
-} = useZoom();
+const { zoomFactor, initZoomFactor, increaseZoom, decreaseZoom, resetZoom, isZoom100 } = useZoom();
 
 // 显示返回按钮
 const showBackButton = computed(() => {
@@ -270,14 +266,14 @@ const selectSearchType = (key: number) => {
   }
 };
 
-const rawSearchTypes = ref(SEARCH_TYPES)
+const rawSearchTypes = ref(SEARCH_TYPES);
 const searchTypeOptions = computed(() => {
   // 引用 locale 以创建响应式依赖
   locale.value;
-  return rawSearchTypes.value.map(type => ({
+  return rawSearchTypes.value.map((type) => ({
     label: t(type.label),
     key: type.key
-  }))
+  }));
 });
 
 const selectItem = async (key: string) => {
@@ -418,17 +414,17 @@ const toGithubRelease = () => {
           @apply bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300;
         }
       }
-      
+
       // 缩放控制样式
       .zoom-controls {
         @apply flex items-center gap-1;
-        
+
         .zoom-value {
           @apply text-xs px-2 py-0.5 rounded cursor-pointer;
           @apply bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300;
           @apply hover:bg-gray-200 dark:hover:bg-gray-600;
           transition: all 0.2s ease;
-          
+
           &.zoom-100 {
             @apply bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 font-bold;
             @apply hover:bg-green-200 dark:hover:bg-green-800;

src/renderer/router/index.ts

@@ -1,12 +1,13 @@
 import { createRouter, createWebHashHistory } from 'vue-router';
 
-import { useUserStore } from '../store/modules/user';
 import AppLayout from '@/layout/AppLayout.vue';
 import MiniLayout from '@/layout/MiniLayout.vue';
 import homeRouter from '@/router/home';
 import otherRouter from '@/router/other';
 import { useSettingsStore } from '@/store/modules/settings';
 
+import { useUserStore } from '../store/modules/user';
+
 function getUserId(): string | null {
   const userStore = useUserStore();
   return userStore.user?.userId?.toString() || null;

src/renderer/router/other.ts

@@ -86,6 +86,6 @@ const otherRouter = [
       back: true
     },
     component: () => import('@/views/playlist/ImportPlaylist.vue')
-  },
+  }
 ];
 export default otherRouter;

src/renderer/services/audioService.ts

@@ -57,10 +57,10 @@ class AudioService {
     // 从本地存储加载 EQ 开关状态
     const bypassState = localStorage.getItem('eqBypass');
     this.bypass = bypassState ? JSON.parse(bypassState) : false;
-    
+
     // 页面加载时立即强制重置操作锁
     this.forceResetOperationLock();
-    
+
     // 添加页面卸载事件，确保离开页面时清除锁
     window.addEventListener('beforeunload', () => {
       this.forceResetOperationLock();
@@ -265,7 +265,7 @@ class AudioService {
         return;
       }
       const howl = sound as any;
-      // eslint-disable-next-line no-underscore-dangle
+
       const audioNode = howl._sounds?.[0]?._node;
 
       if (!audioNode || !(audioNode instanceof HTMLMediaElement)) {
@@ -379,12 +379,12 @@ class AudioService {
   private setOperationLock(): boolean {
     // 生成唯一的锁ID
     const lockId = Date.now().toString() + Math.random().toString(36).substring(2, 9);
-    
+
     // 如果锁已经存在，检查是否超时
     if (this.operationLock) {
       const currentTime = Date.now();
       const lockDuration = currentTime - this.operationLockStartTime;
-      
+
       // 如果锁持续时间超过2秒，直接强制重置
       if (lockDuration > 2000) {
         console.warn(`操作锁已激活 ${lockDuration}ms，超过安全阈值，强制重置`);
@@ -394,47 +394,50 @@ class AudioService {
         return false;
       }
     }
-    
+
     this.operationLock = true;
     this.operationLockStartTime = Date.now();
     this.operationLockId = lockId;
-    
+
     // 将锁信息存储到 localStorage（仅用于调试，实际不依赖此值）
     try {
-      localStorage.setItem('audioOperationLock', JSON.stringify({
-        id: this.operationLockId,
-        startTime: this.operationLockStartTime
-      }));
+      localStorage.setItem(
+        'audioOperationLock',
+        JSON.stringify({
+          id: this.operationLockId,
+          startTime: this.operationLockStartTime
+        })
+      );
     } catch (error) {
       console.error('存储操作锁信息失败:', error);
     }
-    
+
     // 清除之前的定时器
     if (this.operationLockTimer) {
       clearTimeout(this.operationLockTimer);
     }
-    
+
     // 设置超时自动释放锁
     this.operationLockTimer = setTimeout(() => {
       console.warn('操作锁超时自动释放');
       this.releaseOperationLock();
     }, this.operationLockTimeout);
-    
+
     return true;
   }
-  
+
   // 释放操作锁
   public releaseOperationLock(): void {
     this.operationLock = false;
     this.operationLockStartTime = 0;
-    
+
     // 从 localStorage 中移除锁信息
     try {
       localStorage.removeItem('audioOperationLock');
     } catch (error) {
       console.error('清除存储的操作锁信息失败:', error);
     }
-    
+
     if (this.operationLockTimer) {
       clearTimeout(this.operationLockTimer);
       this.operationLockTimer = null;
@@ -447,39 +450,44 @@ class AudioService {
     this.operationLock = false;
     this.operationLockStartTime = 0;
     this.operationLockId = '';
-    
+
     if (this.operationLockTimer) {
       clearTimeout(this.operationLockTimer);
       this.operationLockTimer = null;
     }
-    
+
     // 清除存储的锁
     localStorage.removeItem('audioOperationLock');
   }
 
   // 播放控制相关
-  play(url?: string, track?: SongResult, isPlay: boolean = true, seekTime: number = 0): Promise<Howl> {
+  play(
+    url?: string,
+    track?: SongResult,
+    isPlay: boolean = true,
+    seekTime: number = 0
+  ): Promise<Howl> {
     // 每次调用play方法时，尝试强制重置锁（注意：仅在页面刷新后的第一次播放时应用）
     if (!this.currentSound) {
       console.log('首次播放请求，强制重置操作锁');
       this.forceResetOperationLock();
     }
-    
+
     // 如果操作锁已激活，但持续时间超过安全阈值，强制重置
     if (this.operationLock) {
       const currentTime = Date.now();
       const lockDuration = currentTime - this.operationLockStartTime;
-      
+
       if (lockDuration > 2000) {
         console.warn(`操作锁已激活 ${lockDuration}ms，超过安全阈值，强制重置`);
         this.forceResetOperationLock();
       }
     }
-    
+
     // 获取锁
     if (!this.setOperationLock()) {
       console.log('audioService: 操作锁激活，强制执行当前播放请求');
-      
+
       // 如果只是要继续播放当前音频，直接执行
       if (this.currentSound && !url && !track) {
         if (this.seekLock && this.seekDebounceTimer) {
@@ -489,10 +497,10 @@ class AudioService {
         this.currentSound.play();
         return Promise.resolve(this.currentSound);
       }
-      
+
       // 强制释放锁并继续执行
       this.forceResetOperationLock();
-      
+
       // 这里不再返回错误，而是继续执行播放逻辑
     }
 
@@ -599,13 +607,13 @@ class AudioService {
               try {
                 // 初始化音频管道
                 await this.setupEQ(this.currentSound!);
-                
+
                 // 重新应用已保存的音量
                 const savedVolume = localStorage.getItem('volume');
                 if (savedVolume) {
                   this.applyVolume(parseFloat(savedVolume));
                 }
-                
+
                 // 音频加载成功后设置 EQ 和更新媒体会话
                 if (this.currentSound) {
                   try {
@@ -683,7 +691,7 @@ class AudioService {
   stop() {
     // 强制重置操作锁并继续执行
     this.forceResetOperationLock();
-    
+
     try {
       if (this.currentSound) {
         try {
@@ -699,7 +707,7 @@ class AudioService {
         }
         this.currentSound = null;
       }
-      
+
       this.currentTrack = null;
       if ('mediaSession' in navigator) {
         navigator.mediaSession.playbackState = 'none';
@@ -717,7 +725,7 @@ class AudioService {
   seek(time: number) {
     // 直接强制重置操作锁
     this.forceResetOperationLock();
-    
+
     if (this.currentSound) {
       try {
         // 直接执行seek操作
@@ -733,7 +741,7 @@ class AudioService {
 
   pause() {
     this.forceResetOperationLock();
-    
+
     if (this.currentSound) {
       try {
         // 确保任何进行中的seek操作被取消
@@ -793,10 +801,10 @@ class AudioService {
   private applyVolume(volume: number) {
     // 确保值在0到1之间
     const normalizedVolume = Math.max(0, Math.min(1, volume));
-    
+
     // 使用线性缩放音量
     const linearVolume = normalizedVolume;
-    
+
     // 将音量应用到所有相关节点
     if (this.gainNode) {
       // 立即设置音量
@@ -805,39 +813,41 @@ class AudioService {
     } else {
       this.currentSound?.volume(linearVolume);
     }
-    
+
     // 保存值
     localStorage.setItem('volume', linearVolume.toString());
-    
+
     console.log('Volume applied (linear):', linearVolume);
   }
 
   // 添加方法检查当前音频是否在加载状态
   isLoading(): boolean {
     if (!this.currentSound) return false;
-    
+
     // 检查Howl对象的内部状态
     // 如果状态为1表示已经加载但未完成，状态为2表示正在加载
     const state = (this.currentSound as any)._state;
     // 如果操作锁激活也认为是加载状态
-    return this.operationLock || (state === 'loading' || state === 1);
+    return this.operationLock || state === 'loading' || state === 1;
   }
-  
+
   // 检查音频是否真正在播放
   isActuallyPlaying(): boolean {
     if (!this.currentSound) return false;
-    
+
     try {
-      // 综合判断: 
+      // 综合判断:
       // 1. Howler API是否报告正在播放
       // 2. 是否不在加载状态
       // 3. 确保音频上下文状态正常
       const isPlaying = this.currentSound.playing();
       const isLoading = this.isLoading();
       const contextRunning = Howler.ctx && Howler.ctx.state === 'running';
-      
-      console.log(`实际播放状态检查: playing=${isPlaying}, loading=${isLoading}, contextRunning=${contextRunning}`);
-      
+
+      console.log(
+        `实际播放状态检查: playing=${isPlaying}, loading=${isLoading}, contextRunning=${contextRunning}`
+      );
+
       // 只有在三个条件都满足时才认为是真正在播放
       return isPlaying && !isLoading && contextRunning;
     } catch (error) {

src/renderer/store/index.ts

@@ -1,4 +1,5 @@
 import { createPinia } from 'pinia';
+
 import router from '@/router';
 
 // 创建 pinia 实例
@@ -12,10 +13,10 @@ pinia.use(({ store }) => {
 // 导出所有 store
 export * from './modules/lyric';
 export * from './modules/menu';
+export * from './modules/music';
 export * from './modules/player';
 export * from './modules/search';
 export * from './modules/settings';
 export * from './modules/user';
-export * from './modules/music';
 
 export default pinia;

src/renderer/store/modules/music.ts

@@ -35,11 +35,11 @@ export const useMusicStore = defineStore('music', {
     // 从列表中移除一首歌曲
     removeSongFromList(id: number) {
       if (!this.currentMusicList) return;
-      
+
       const index = this.currentMusicList.findIndex((song) => song.id === id);
       if (index !== -1) {
         this.currentMusicList.splice(index, 1);
       }
     }
   }
-}); 
+});

src/renderer/store/modules/player.ts

@@ -1,7 +1,8 @@
+import { useThrottleFn } from '@vueuse/core';
 import { cloneDeep } from 'lodash';
+import { createDiscreteApi } from 'naive-ui';
 import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
-import { useThrottleFn } from '@vueuse/core';
 
 import i18n from '@/../i18n/renderer';
 import { getBilibiliAudioUrl } from '@/api/bilibili';
@@ -9,13 +10,12 @@ import { getLikedList, getMusicLrc, getMusicUrl, getParsingMusicUrl, likeSong }
 import { useMusicHistory } from '@/hooks/MusicHistoryHook';
 import { audioService } from '@/services/audioService';
 import type { ILyric, ILyricText, SongResult } from '@/type/music';
+import { type Platform } from '@/types/music';
 import { getImgUrl } from '@/utils';
 import { getImageLinearBackground } from '@/utils/linearColor';
-import { createDiscreteApi } from 'naive-ui';
 
 import { useSettingsStore } from './settings';
 import { useUserStore } from './user';
-import { type Platform } from '@/types/music';
 
 const musicHistory = useMusicHistory();
 const { message } = createDiscreteApi(['message']);
@@ -35,12 +35,12 @@ function getLocalStorageItem<T>(key: string, defaultValue: T): T {
 export const isBilibiliIdMatch = (id1: string | number, id2: string | number): boolean => {
   const str1 = String(id1);
   const str2 = String(id2);
-  
+
   // 如果两个ID都不包含--分隔符，直接比较
   if (!str1.includes('--') && !str2.includes('--')) {
     return str1 === str2;
   }
-  
+
   // 处理B站视频ID
   if (str1.includes('--') || str2.includes('--')) {
     // 尝试从ID中提取bvid和cid
@@ -56,21 +56,21 @@ export const isBilibiliIdMatch = (id1: string | number, id2: string | number): b
       }
       return { bvid: '', cid: '' };
     };
-    
+
     const { bvid: bvid1, cid: cid1 } = extractBvIdAndCid(str1);
     const { bvid: bvid2, cid: cid2 } = extractBvIdAndCid(str2);
-    
+
     // 如果两个ID都有bvid，比较bvid和cid
     if (bvid1 && bvid2) {
       return bvid1 === bvid2 && cid1 === cid2;
     }
-    
+
     // 其他情况，只比较cid部分
     if (cid1 && cid2) {
       return cid1 === cid2;
     }
   }
-  
+
   // 默认情况，直接比较完整ID
   return str1 === str2;
 };
@@ -105,28 +105,28 @@ export const getSongUrl = async (
     }
 
     const numericId = typeof id === 'string' ? parseInt(id, 10) : id;
-    
+
     // 检查是否有自定义音源设置
     const songId = String(id);
     const savedSource = localStorage.getItem(`song_source_${songId}`);
-    
+
     // 如果有自定义音源设置，直接使用getParsingMusicUrl获取URL
     if (savedSource && songData.source !== 'bilibili') {
       try {
         console.log(`使用自定义音源解析歌曲 ID: ${songId}`);
         const res = await getParsingMusicUrl(numericId, cloneDeep(songData));
-        console.log('res',res)
+        console.log('res', res);
         if (res && res.data && res.data.data && res.data.data.url) {
           return res.data.data.url;
         }
         // 如果自定义音源解析失败，继续使用正常的获取流程
         console.warn('自定义音源解析失败，使用默认音源');
       } catch (error) {
-        console.error('error',error)
+        console.error('error', error);
         console.error('自定义音源解析出错:', error);
       }
     }
-    
+
     // 正常获取URL流程
     const { data } = await getMusicUrl(numericId, isDownloaded);
     let url = '';
@@ -149,7 +149,7 @@ export const getSongUrl = async (
     url = url || data.data[0].url;
     return url;
   } catch (error) {
-    console.error('error',error)
+    console.error('error', error);
     return null;
   }
 };
@@ -220,7 +220,7 @@ export const loadLrc = async (id: string | number): Promise<ILyric> => {
 
 const getSongDetail = async (playMusic: SongResult) => {
   // playMusic.playLoading 在 handlePlayMusic 中已设置，这里不再设置
-  
+
   if (playMusic.source === 'bilibili') {
     console.log('处理B站音频详情');
     try {
@@ -231,9 +231,9 @@ const getSongDetail = async (playMusic: SongResult) => {
           playMusic.bilibiliData.cid
         );
       }
-      
+
       playMusic.playLoading = false;
-      return { ...playMusic} as SongResult;
+      return { ...playMusic } as SongResult;
     } catch (error) {
       console.error('获取B站音频详情失败:', error);
       playMusic.playLoading = false;
@@ -370,17 +370,17 @@ const loadLrcAsync = async (playMusic: SongResult) => {
 
 // 定时关闭类型
 export enum SleepTimerType {
-  NONE = 'none',         // 没有定时
-  TIME = 'time',         // 按时间定时
-  SONGS = 'songs',       // 按歌曲数定时
-  PLAYLIST_END = 'end'   // 播放列表播放完毕定时
+  NONE = 'none', // 没有定时
+  TIME = 'time', // 按时间定时
+  SONGS = 'songs', // 按歌曲数定时
+  PLAYLIST_END = 'end' // 播放列表播放完毕定时
 }
 
 // 定时关闭信息
 export interface SleepTimerInfo {
   type: SleepTimerType;
-  value: number;         // 对于TIME类型，值以分钟为单位；对于SONGS类型，值为歌曲数量
-  endTime?: number;      // 何时结束（仅TIME类型）
+  value: number; // 对于TIME类型，值以分钟为单位；对于SONGS类型，值为歌曲数量
+  endTime?: number; // 何时结束（仅TIME类型）
   startSongIndex?: number; // 开始时的歌曲索引（对于SONGS类型）
   remainingSongs?: number; // 剩余歌曲数（对于SONGS类型）
 }
@@ -399,19 +399,21 @@ export const usePlayerStore = defineStore('player', () => {
   const showSleepTimer = ref(false); // 定时弹窗
   // 添加播放列表抽屉状态
   const playListDrawerVisible = ref(false);
-  
+
   // 定时关闭相关状态
-  const sleepTimer = ref<SleepTimerInfo>(getLocalStorageItem('sleepTimer', {
-    type: SleepTimerType.NONE,
-    value: 0
-  }));
+  const sleepTimer = ref<SleepTimerInfo>(
+    getLocalStorageItem('sleepTimer', {
+      type: SleepTimerType.NONE,
+      value: 0
+    })
+  );
 
   // 播放速度状态
   const playbackRate = ref(parseFloat(getLocalStorageItem('playbackRate', '1.0')));
 
   // 清空播放列表
   const clearPlayAll = async () => {
-    audioService.pause()
+    audioService.pause();
     setTimeout(() => {
       playMusic.value = {} as SongResult;
       playMusicUrl.value = '';
@@ -423,15 +425,15 @@ export const usePlayerStore = defineStore('player', () => {
       localStorage.removeItem('playListIndex');
     }, 500);
   };
-  
+
   const timerInterval = ref<number | null>(null);
-  
+
   // 当前定时关闭状态
   const currentSleepTimer = computed(() => sleepTimer.value);
-  
+
   // 判断是否有活跃的定时关闭
   const hasSleepTimerActive = computed(() => sleepTimer.value.type !== SleepTimerType.NONE);
-  
+
   // 获取剩余时间（用于UI显示）
   const sleepTimerRemainingTime = computed(() => {
     if (sleepTimer.value.type === SleepTimerType.TIME && sleepTimer.value.endTime) {
@@ -440,7 +442,7 @@ export const usePlayerStore = defineStore('player', () => {
     }
     return 0;
   });
-  
+
   // 获取剩余歌曲数（用于UI显示）
   const sleepTimerRemainingSongs = computed(() => {
     if (sleepTimer.value.type === SleepTimerType.SONGS) {
@@ -448,7 +450,7 @@ export const usePlayerStore = defineStore('player', () => {
     }
     return 0;
   });
-  
+
   const currentSong = computed(() => playMusic.value);
   const isPlaying = computed(() => isPlay.value);
   const currentPlayList = computed(() => playList.value);
@@ -467,17 +469,17 @@ export const usePlayerStore = defineStore('player', () => {
     const originalMusic = { ...music };
     // 获取背景色
     const { backgroundColor, primaryColor } =
-    music.backgroundColor && music.primaryColor
-      ? music
-      : await getImageLinearBackground(getImgUrl(music?.picUrl, '30y30'));
+      music.backgroundColor && music.primaryColor
+        ? music
+        : await getImageLinearBackground(getImgUrl(music?.picUrl, '30y30'));
     music.backgroundColor = backgroundColor;
     music.primaryColor = primaryColor;
     music.playLoading = true; // 设置加载状态
     playMusic.value = music;
-    
+
     // 更新播放相关状态
     play.value = isPlay;
-    
+
     // 更新标题
     let title = music.name;
     if (music.source === 'netease' && music?.song?.artists) {
@@ -491,21 +493,20 @@ export const usePlayerStore = defineStore('player', () => {
     document.title = 'AlgerMusic - ' + title;
 
     try {
-      
       // 添加到历史记录
       musicHistory.addMusic(music);
-      
+
       // 查找歌曲在播放列表中的索引
       const songIndex = playList.value.findIndex(
         (item: SongResult) => item.id === music.id && item.source === music.source
       );
-      
+
       // 只有在 songIndex 有效，并且与当前 playListIndex 不同时才更新
       if (songIndex !== -1 && songIndex !== playListIndex.value) {
         console.log('歌曲索引不匹配，更新为:', songIndex);
         playListIndex.value = songIndex;
       }
-      
+
       // 获取歌曲详情，包括URL
       const updatedPlayMusic = await getSongDetail(originalMusic);
       playMusic.value = updatedPlayMusic;
@@ -516,7 +517,7 @@ export const usePlayerStore = defineStore('player', () => {
       localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
       localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
       localStorage.setItem('isPlaying', play.value.toString());
-      
+
       // 无论如何都预加载更多歌曲
       if (songIndex !== -1) {
         setTimeout(() => {
@@ -525,20 +526,20 @@ export const usePlayerStore = defineStore('player', () => {
       } else {
         console.warn('当前歌曲未在播放列表中找到');
       }
-      
+
       // 使用标记防止循环调用
       let playInProgress = false;
-      
+
       // 直接调用 playAudio 方法播放音频
       try {
         if (playInProgress) {
           console.warn('播放操作正在进行中，避免重复调用');
           return true;
         }
-        
+
         playInProgress = true;
         const result = await playAudio();
-        
+
         playInProgress = false;
         return !!result;
       } catch (error) {
@@ -564,12 +565,12 @@ export const usePlayerStore = defineStore('player', () => {
 
   // 添加独立的播放状态检测函数
   const checkPlaybackState = (song: SongResult, timeout: number = 4000) => {
-    if(checkPlayTime) {
+    if (checkPlayTime) {
       clearTimeout(checkPlayTime);
     }
     const sound = audioService.getCurrentSound();
     if (!sound) return;
-    
+
     // 使用audioService的事件系统监听播放状态
     // 添加一次性播放事件监听器
     const onPlayHandler = () => {
@@ -578,13 +579,13 @@ export const usePlayerStore = defineStore('player', () => {
       audioService.off('play', onPlayHandler);
       audioService.off('playerror', onPlayErrorHandler);
     };
-    
+
     // 添加一次性播放错误事件监听器
     const onPlayErrorHandler = async () => {
       console.log('播放错误事件触发，尝试重新获取URL');
       audioService.off('play', onPlayHandler);
       audioService.off('playerror', onPlayErrorHandler);
-      
+
       // 只有用户仍然希望播放时才重试
       if (userPlayIntent.value && play.value) {
         // 重置URL并重新播放
@@ -594,11 +595,11 @@ export const usePlayerStore = defineStore('player', () => {
         await handlePlayMusic(refreshedSong, true);
       }
     };
-    
+
     // 注册事件监听器
     audioService.on('play', onPlayHandler);
     audioService.on('playerror', onPlayErrorHandler);
-    
+
     // 额外的安全检查：如果指定时间后仍未播放也未触发错误，且用户仍希望播放
     checkPlayTime = setTimeout(() => {
       // 使用更准确的方法检查是否真正在播放
@@ -607,7 +608,7 @@ export const usePlayerStore = defineStore('player', () => {
         // 移除事件监听器
         audioService.off('play', onPlayHandler);
         audioService.off('playerror', onPlayErrorHandler);
-        
+
         // 重置URL并重新播放
         playMusic.value.playMusicUrl = undefined;
         // 保持播放状态，强制重新获取URL
@@ -628,9 +629,13 @@ export const usePlayerStore = defineStore('player', () => {
         // 重置过期时间，以便重新获取
         song.expiredAt = undefined;
       }
-      
+
       // 如果是当前正在播放的音乐，则切换播放/暂停状态
-      if (playMusic.value.id === song.id && playMusic.value.playMusicUrl === song.playMusicUrl && !song.isFirstPlay) {
+      if (
+        playMusic.value.id === song.id &&
+        playMusic.value.playMusicUrl === song.playMusicUrl &&
+        !song.isFirstPlay
+      ) {
         if (play.value) {
           setPlayMusic(false);
           audioService.getCurrentSound()?.pause();
@@ -650,12 +655,12 @@ export const usePlayerStore = defineStore('player', () => {
         return;
       }
 
-      if(song.isFirstPlay) {
+      if (song.isFirstPlay) {
         song.isFirstPlay = false;
       }
       // 直接调用 handlePlayMusic，它会处理索引更新和播放逻辑
       const success = await handlePlayMusic(song);
-      
+
       // 记录到本地存储，保持一致性
       localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
       localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
@@ -724,96 +729,96 @@ export const usePlayerStore = defineStore('player', () => {
   const setSleepTimerByTime = (minutes: number) => {
     // 清除现有定时器
     clearSleepTimer();
-    
+
     if (minutes <= 0) {
       return;
     }
-    
+
     const endTime = Date.now() + minutes * 60 * 1000;
-    
+
     sleepTimer.value = {
       type: SleepTimerType.TIME,
       value: minutes,
       endTime
     };
-    
+
     // 保存到本地存储
     localStorage.setItem('sleepTimer', JSON.stringify(sleepTimer.value));
-    
+
     // 设置定时器检查
     timerInterval.value = window.setInterval(() => {
       checkSleepTimer();
     }, 1000) as unknown as number; // 每秒检查一次
-    
+
     console.log(`设置定时关闭: ${minutes}分钟后`);
     return true;
   };
-  
+
   // 睡眠定时器功能
   const setSleepTimerBySongs = (songs: number) => {
     // 清除现有定时器
     clearSleepTimer();
-    
+
     if (songs <= 0) {
       return;
     }
-    
+
     sleepTimer.value = {
       type: SleepTimerType.SONGS,
       value: songs,
       startSongIndex: playListIndex.value,
       remainingSongs: songs
     };
-    
+
     // 保存到本地存储
     localStorage.setItem('sleepTimer', JSON.stringify(sleepTimer.value));
-    
+
     console.log(`设置定时关闭: 再播放${songs}首歌后`);
     return true;
   };
-  
+
   // 睡眠定时器功能
   const setSleepTimerAtPlaylistEnd = () => {
     // 清除现有定时器
     clearSleepTimer();
-    
+
     sleepTimer.value = {
       type: SleepTimerType.PLAYLIST_END,
       value: 0
     };
-    
+
     // 保存到本地存储
     localStorage.setItem('sleepTimer', JSON.stringify(sleepTimer.value));
-    
+
     console.log('设置定时关闭: 播放列表结束时');
     return true;
   };
-  
+
   // 取消定时关闭
   const clearSleepTimer = () => {
     if (timerInterval.value) {
       window.clearInterval(timerInterval.value);
       timerInterval.value = null;
     }
-    
+
     sleepTimer.value = {
       type: SleepTimerType.NONE,
       value: 0
     };
-    
+
     // 保存到本地存储
     localStorage.setItem('sleepTimer', JSON.stringify(sleepTimer.value));
-    
+
     console.log('取消定时关闭');
     return true;
   };
-  
+
   // 检查定时关闭是否应该触发
   const checkSleepTimer = () => {
     if (sleepTimer.value.type === SleepTimerType.NONE) {
       return;
     }
-    
+
     if (sleepTimer.value.type === SleepTimerType.TIME && sleepTimer.value.endTime) {
       if (Date.now() >= sleepTimer.value.endTime) {
         // 时间到，停止播放
@@ -823,16 +828,16 @@ export const usePlayerStore = defineStore('player', () => {
       // 播放列表结束定时由nextPlay方法处理
     }
   };
-  
+
   // 停止播放并清除定时器
   const stopPlayback = () => {
     console.log('定时器触发：停止播放');
-    
+
     if (isPlaying.value) {
       setIsPlay(false);
       audioService.pause();
     }
-    
+
     // 如果使用Electron，发送通知
     if (window.electron?.ipcRenderer) {
       window.electron.ipcRenderer.send('show-notification', {
@@ -840,40 +845,44 @@ export const usePlayerStore = defineStore('player', () => {
         body: i18n.global.t('player.sleepTimer.playbackStopped')
       });
     }
-    
+
     // 清除定时器
     clearSleepTimer();
   };
-  
+
   // 监听歌曲变化，处理按歌曲数定时和播放列表结束定时
   const handleSongChange = () => {
     console.log('歌曲已切换，检查定时器状态:', sleepTimer.value);
-    
+
     // 处理按歌曲数定时
-    if (sleepTimer.value.type === SleepTimerType.SONGS && sleepTimer.value.remainingSongs !== undefined) {
+    if (
+      sleepTimer.value.type === SleepTimerType.SONGS &&
+      sleepTimer.value.remainingSongs !== undefined
+    ) {
       sleepTimer.value.remainingSongs--;
       console.log(`剩余歌曲数: ${sleepTimer.value.remainingSongs}`);
-      
+
       // 保存到本地存储
       localStorage.setItem('sleepTimer', JSON.stringify(sleepTimer.value));
-      
+
       if (sleepTimer.value.remainingSongs <= 0) {
         // 歌曲数到达，停止播放
         console.log('已播放完设定的歌曲数，停止播放');
-        stopPlayback()
+        stopPlayback();
         setTimeout(() => {
           stopPlayback();
         }, 1000);
       }
     }
-    
+
     // 处理播放列表结束定时
     if (sleepTimer.value.type === SleepTimerType.PLAYLIST_END) {
       // 检查是否到达播放列表末尾
-      const isLastSong = (playListIndex.value === playList.value.length - 1);
-      
+      const isLastSong = playListIndex.value === playList.value.length - 1;
+
       // 如果是列表最后一首歌且不是循环模式，则设置为在这首歌结束后停止
-      if (isLastSong && playMode.value !== 1) { // 1 是循环模式
+      if (isLastSong && playMode.value !== 1) {
+        // 1 是循环模式
         console.log('已到达播放列表末尾，将在当前歌曲结束后停止播放');
         // 转换为按歌曲数定时，剩余1首
         sleepTimer.value = {
@@ -888,17 +897,18 @@ export const usePlayerStore = defineStore('player', () => {
   };
 
   const _nextPlay = async () => {
-
     try {
-      
       if (playList.value.length === 0) {
         play.value = true;
         return;
       }
 
       // 检查是否是播放列表的最后一首且设置了播放列表结束定时
-      if (playMode.value === 0 && playListIndex.value === playList.value.length - 1 && 
-          sleepTimer.value.type === SleepTimerType.PLAYLIST_END) {
+      if (
+        playMode.value === 0 &&
+        playListIndex.value === playList.value.length - 1 &&
+        sleepTimer.value.type === SleepTimerType.PLAYLIST_END
+      ) {
         // 已是最后一首且为顺序播放模式，触发停止
         stopPlayback();
         return;
@@ -920,14 +930,14 @@ export const usePlayerStore = defineStore('player', () => {
 
       // 获取下一首歌曲
       let nextSong = { ...playList.value[nowPlayListIndex] };
-      
+
       // 记录尝试播放过的索引，防止无限循环
       const attemptedIndices = new Set<number>();
       attemptedIndices.add(nowPlayListIndex);
 
       // 先更新当前播放索引
       playListIndex.value = nowPlayListIndex;
-      
+
       // 尝试播放
       let success = false;
       let retryCount = 0;
@@ -936,33 +946,34 @@ export const usePlayerStore = defineStore('player', () => {
       // 尝试播放，最多尝试maxRetries次
       while (!success && retryCount < maxRetries) {
         success = await handlePlayMusic(nextSong, true);
-        
+
         if (!success) {
           retryCount++;
           console.error(`播放失败，尝试 ${retryCount}/${maxRetries}`);
-          
+
           if (retryCount >= maxRetries) {
             console.error('多次尝试播放失败，将从播放列表中移除此歌曲');
             // 从播放列表中移除失败的歌曲
             const newPlayList = [...playList.value];
             newPlayList.splice(nowPlayListIndex, 1);
-            
+
             if (newPlayList.length > 0) {
               // 更新播放列表，但保持当前索引不变
               const keepCurrentIndexPosition = true;
               setPlayList(newPlayList, keepCurrentIndexPosition);
-              
+
               // 继续尝试下一首
               if (playMode.value === 2) {
                 // 随机模式，随机选择一首未尝试过的
                 const availableIndices = Array.from(
-                  { length: newPlayList.length }, 
+                  { length: newPlayList.length },
                   (_, i) => i
-                ).filter(i => !attemptedIndices.has(i));
-                
+                ).filter((i) => !attemptedIndices.has(i));
+
                 if (availableIndices.length > 0) {
                   // 随机选择一个未尝试过的索引
-                  nowPlayListIndex = availableIndices[Math.floor(Math.random() * availableIndices.length)];
+                  nowPlayListIndex =
+                    availableIndices[Math.floor(Math.random() * availableIndices.length)];
                 } else {
                   // 如果所有歌曲都尝试过了，选择下一个索引
                   nowPlayListIndex = (playListIndex.value + 1) % newPlayList.length;
@@ -970,14 +981,13 @@ export const usePlayerStore = defineStore('player', () => {
               } else {
                 // 顺序播放，选择下一首
                 // 如果当前索引已经是最后一首，循环到第一首
-                nowPlayListIndex = playListIndex.value >= newPlayList.length
-                  ? 0 
-                  : playListIndex.value;
+                nowPlayListIndex =
+                  playListIndex.value >= newPlayList.length ? 0 : playListIndex.value;
               }
-              
+
               playListIndex.value = nowPlayListIndex;
               attemptedIndices.add(nowPlayListIndex);
-              
+
               if (newPlayList[nowPlayListIndex]) {
                 nextSong = { ...newPlayList[nowPlayListIndex] };
                 retryCount = 0; // 重置重试计数器，为新歌曲准备
@@ -994,7 +1004,7 @@ export const usePlayerStore = defineStore('player', () => {
           }
         }
       }
-      
+
       // 歌曲切换成功，触发歌曲变更处理（用于定时关闭功能）
       if (success) {
         handleSongChange();
@@ -1014,14 +1024,12 @@ export const usePlayerStore = defineStore('player', () => {
   const nextPlay = useThrottleFn(_nextPlay, 500);
 
   const _prevPlay = async () => {
-    
     try {
-
       if (playList.value.length === 0) {
         play.value = true;
         return;
       }
-      
+
       // 保存当前索引，用于错误恢复
       const currentIndex = playListIndex.value;
       const nowPlayListIndex =
@@ -1029,10 +1037,10 @@ export const usePlayerStore = defineStore('player', () => {
 
       // 获取上一首歌曲
       const prevSong = { ...playList.value[nowPlayListIndex] };
-      
+
       // 重要：首先更新当前播放索引
       playListIndex.value = nowPlayListIndex;
-      
+
       // 尝试播放
       let success = false;
       let retryCount = 0;
@@ -1041,33 +1049,34 @@ export const usePlayerStore = defineStore('player', () => {
       // 尝试播放，最多尝试maxRetries次
       while (!success && retryCount < maxRetries) {
         success = await handlePlayMusic(prevSong);
-        
+
         if (!success) {
           retryCount++;
           console.error(`播放上一首失败，尝试 ${retryCount}/${maxRetries}`);
-          
+
           // 最后一次尝试失败
           if (retryCount >= maxRetries) {
             console.error('多次尝试播放失败，将从播放列表中移除此歌曲');
             // 从播放列表中移除失败的歌曲
             const newPlayList = [...playList.value];
             newPlayList.splice(nowPlayListIndex, 1);
-            
+
             if (newPlayList.length > 0) {
               // 更新播放列表，但保持当前索引不变
               const keepCurrentIndexPosition = true;
               setPlayList(newPlayList, keepCurrentIndexPosition);
-              
+
               // 恢复到原始索引或继续尝试上一首
               if (newPlayList.length === 1) {
                 // 只剩一首歌，直接播放它
                 playListIndex.value = 0;
               } else {
                 // 尝试上上一首
-                const newPrevIndex = (playListIndex.value - 1 + newPlayList.length) % newPlayList.length;
+                const newPrevIndex =
+                  (playListIndex.value - 1 + newPlayList.length) % newPlayList.length;
                 playListIndex.value = newPrevIndex;
               }
-              
+
               // 延迟一点时间再尝试，避免可能的无限循环
               setTimeout(() => {
                 prevPlay(); // 递归调用，尝试再上一首
@@ -1081,7 +1090,7 @@ export const usePlayerStore = defineStore('player', () => {
           }
         }
       }
-      
+
       if (!success) {
         console.error('所有尝试都失败，无法播放上一首歌曲');
         // 如果尝试了所有可能的歌曲仍然失败，恢复到原始索引
@@ -1104,12 +1113,12 @@ export const usePlayerStore = defineStore('player', () => {
 
   const addToFavorite = async (id: number | string) => {
     // 检查是否已存在相同的ID或内容相同的B站视频
-    const isAlreadyInList = favoriteList.value.some(existingId => 
-      typeof id === 'string' && id.includes('--') 
+    const isAlreadyInList = favoriteList.value.some((existingId) =>
+      typeof id === 'string' && id.includes('--')
         ? isBilibiliIdMatch(existingId, id)
         : existingId === id
     );
-    
+
     if (!isAlreadyInList) {
       favoriteList.value.push(id);
       localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
@@ -1120,9 +1129,11 @@ export const usePlayerStore = defineStore('player', () => {
   const removeFromFavorite = async (id: number | string) => {
     // 对于B站视频，需要根据bvid和cid来匹配
     if (typeof id === 'string' && id.includes('--')) {
-      favoriteList.value = favoriteList.value.filter(existingId => !isBilibiliIdMatch(existingId, id));
+      favoriteList.value = favoriteList.value.filter(
+        (existingId) => !isBilibiliIdMatch(existingId, id)
+      );
     } else {
-      favoriteList.value = favoriteList.value.filter(existingId => existingId !== id);
+      favoriteList.value = favoriteList.value.filter((existingId) => existingId !== id);
       useUserStore().user && likeSong(Number(id), false);
     }
     localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
@@ -1131,12 +1142,12 @@ export const usePlayerStore = defineStore('player', () => {
   const addToDislikeList = (id: number | string) => {
     dislikeList.value.push(id);
     localStorage.setItem('dislikeList', JSON.stringify(dislikeList.value));
-  }
+  };
 
   const removeFromDislikeList = (id: number | string) => {
-    dislikeList.value = dislikeList.value.filter(existingId => existingId!== id);
+    dislikeList.value = dislikeList.value.filter((existingId) => existingId !== id);
     localStorage.setItem('dislikeList', JSON.stringify(dislikeList.value));
-  }
+  };
 
   const removeFromPlayList = (id: number | string) => {
     const index = playList.value.findIndex((item) => item.id === id);
@@ -1184,7 +1195,10 @@ export const usePlayerStore = defineStore('player', () => {
           savedPlayMusic.playMusicUrl = undefined;
         }
 
-        await handlePlayMusic({ ...savedPlayMusic, isFirstPlay: true, playMusicUrl: undefined }, isPlaying);
+        await handlePlayMusic(
+          { ...savedPlayMusic, isFirstPlay: true, playMusicUrl: undefined },
+          isPlaying
+        );
       } catch (error) {
         console.error('重新获取音乐链接失败:', error);
         play.value = false;
@@ -1201,7 +1215,6 @@ export const usePlayerStore = defineStore('player', () => {
     setTimeout(() => {
       audioService.setPlaybackRate(playbackRate.value);
     }, 2000);
-
   };
 
   const initializeFavoriteList = async () => {
@@ -1233,7 +1246,7 @@ export const usePlayerStore = defineStore('player', () => {
   // 修改 playAudio 函数中的错误处理逻辑，避免在操作锁问题时频繁尝试播放
   const playAudio = async () => {
     if (!playMusicUrl.value || !playMusic.value) return null;
-    
+
     try {
       // 保存当前播放状态
       const shouldPlay = play.value;
@@ -1247,7 +1260,10 @@ export const usePlayerStore = defineStore('player', () => {
       }
 
       // 对于B站视频，检查URL是否有效
-      if (playMusic.value.source === 'bilibili' && (!playMusicUrl.value || playMusicUrl.value === 'undefined')) {
+      if (
+        playMusic.value.source === 'bilibili' &&
+        (!playMusicUrl.value || playMusicUrl.value === 'undefined')
+      ) {
         console.log('B站视频URL无效，尝试重新获取');
 
         // 需要重新获取B站视频URL
@@ -1271,32 +1287,39 @@ export const usePlayerStore = defineStore('player', () => {
 
       // 播放新音频，传递是否应该播放的状态
       console.log('调用audioService.play，播放状态:', shouldPlay);
-      const newSound = await audioService.play(playMusicUrl.value, playMusic.value, shouldPlay, initialPosition || 0);
-      
+      const newSound = await audioService.play(
+        playMusicUrl.value,
+        playMusic.value,
+        shouldPlay,
+        initialPosition || 0
+      );
+
       // 添加播放状态检测（仅当需要播放时）
       if (shouldPlay) {
         checkPlaybackState(playMusic.value);
       }
-      
-      // 发布音频就绪事件，让 MusicHook.ts 来处理设置监听器
-      window.dispatchEvent(new CustomEvent('audio-ready', { detail: { sound: newSound, shouldPlay } }));
+
+      // 发布音频就绪事件
+      window.dispatchEvent(
+        new CustomEvent('audio-ready', { detail: { sound: newSound, shouldPlay } })
+      );
 
       // 确保状态与 localStorage 同步
       localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
       localStorage.setItem('currentPlayMusicUrl', playMusicUrl.value);
-      
+
       return newSound;
     } catch (error) {
       console.error('播放音频失败:', error);
       setPlayMusic(false);
-      
+
       // 检查错误是否是由于操作锁引起的
       const errorMsg = error instanceof Error ? error.message : String(error);
-      
+
       // 操作锁错误处理
       if (errorMsg.includes('操作锁激活')) {
         console.log('由于操作锁正在使用，将在1000ms后重试');
-        
+
         // 强制重置操作锁并延迟再试
         try {
           // 尝试强制重置音频服务的操作锁
@@ -1305,15 +1328,15 @@ export const usePlayerStore = defineStore('player', () => {
         } catch (e) {
           console.error('重置操作锁失败:', e);
         }
-        
+
         // 延迟较长时间，确保锁已完全释放
         setTimeout(() => {
           // 如果用户仍希望播放
           if (userPlayIntent.value && play.value) {
             // 直接重试当前歌曲，而不是切换到下一首
-            playAudio().catch(e => {
+            playAudio().catch((e) => {
               console.error('重试播放失败，切换到下一首:', e);
-              
+
               // 只有再次失败才切换到下一首
               if (playList.value.length > 1) {
                 nextPlay();
@@ -1328,7 +1351,7 @@ export const usePlayerStore = defineStore('player', () => {
           nextPlay();
         }, 300);
       }
-      
+
       message.error(i18n.global.t('player.playFailed'));
       return null;
     }
@@ -1352,40 +1375,39 @@ export const usePlayerStore = defineStore('player', () => {
       // 保存用户选择的音源（作为数组传递，确保unblockMusic可以使用）
       const songId = String(currentSong.id);
       localStorage.setItem(`song_source_${songId}`, JSON.stringify([sourcePlatform]));
-      
+
       // 停止当前播放
       const currentSound = audioService.getCurrentSound();
       if (currentSound) {
         currentSound.pause();
       }
-      
+
       // 重新获取歌曲URL
-      const numericId = typeof currentSong.id === 'string' 
-        ? parseInt(currentSong.id, 10) 
-        : currentSong.id;
-        
+      const numericId =
+        typeof currentSong.id === 'string' ? parseInt(currentSong.id, 10) : currentSong.id;
+
       console.log(`使用音源 ${sourcePlatform} 重新解析歌曲 ${numericId}`);
-      
+
       // 克隆一份歌曲数据，防止修改原始数据
       const songData = cloneDeep(currentSong);
-      
+
       const res = await getParsingMusicUrl(numericId, songData);
       if (res && res.data && res.data.data && res.data.data.url) {
         // 更新URL
         const newUrl = res.data.data.url;
         console.log(`解析成功，获取新URL: ${newUrl.substring(0, 50)}...`);
-        
+
         // 使用新URL更新播放
-        const updatedMusic = { 
-          ...currentSong, 
+        const updatedMusic = {
+          ...currentSong,
           playMusicUrl: newUrl,
-          expiredAt: Date.now() + 1800000  // 半小时后过期
+          expiredAt: Date.now() + 1800000 // 半小时后过期
         };
-        
+
         // 更新播放器状态并开始播放
         await setPlay(updatedMusic);
         setPlayMusic(true);
-        
+
         return true;
       } else {
         console.warn(`使用音源 ${sourcePlatform} 解析失败`);
@@ -1415,7 +1437,7 @@ export const usePlayerStore = defineStore('player', () => {
     } catch (error) {
       console.error('暂停播放失败:', error);
     }
-  }
+  };
 
   return {
     play,
@@ -1429,7 +1451,7 @@ export const usePlayerStore = defineStore('player', () => {
     favoriteList,
     dislikeList,
     playListDrawerVisible,
-    
+
     // 定时关闭相关
     sleepTimer,
     showSleepTimer,

src/renderer/store/modules/settings.ts

@@ -4,7 +4,13 @@ import { ref } from 'vue';
 
 import setDataDefault from '@/../main/set.json';
 import { isElectron } from '@/utils';
-import { applyTheme, getCurrentTheme, getSystemTheme, watchSystemTheme, ThemeType } from '@/utils/theme';
+import {
+  applyTheme,
+  getCurrentTheme,
+  getSystemTheme,
+  ThemeType,
+  watchSystemTheme
+} from '@/utils/theme';
 
 export const useSettingsStore = defineStore('settings', () => {
   const theme = ref<ThemeType>(getCurrentTheme());
@@ -17,10 +23,10 @@ export const useSettingsStore = defineStore('settings', () => {
     { label: '系统默认', value: 'system-ui' }
   ]);
   const showDownloadDrawer = ref(false);
-  
+
   // 系统主题监听器清理函数
   let systemThemeCleanup: (() => void) | null = null;
-  
+
   // 先声明 setData ref 但不初始化
   const setData = ref<any>({});
 
@@ -49,7 +55,7 @@ export const useSettingsStore = defineStore('settings', () => {
 
     // 合并默认设置和保存的设置
     const mergedSettings = merge({}, setDataDefault, savedSettings);
-    
+
     // 更新设置并返回
     setSetData(mergedSettings);
     return mergedSettings;
@@ -62,9 +68,9 @@ export const useSettingsStore = defineStore('settings', () => {
     if (setData.value.autoTheme) {
       // 如果是自动模式，切换到手动模式并设置相反的主题
       const newTheme = theme.value === 'dark' ? 'light' : 'dark';
-      setSetData({ 
-        autoTheme: false, 
-        manualTheme: newTheme 
+      setSetData({
+        autoTheme: false,
+        manualTheme: newTheme
       });
       theme.value = newTheme;
       applyTheme(newTheme);
@@ -84,13 +90,13 @@ export const useSettingsStore = defineStore('settings', () => {
 
   const setAutoTheme = (auto: boolean) => {
     setSetData({ autoTheme: auto });
-    
+
     if (auto) {
       // 启用自动模式
       const systemTheme = getSystemTheme();
       theme.value = systemTheme;
       applyTheme(systemTheme);
-      
+
       // 开始监听系统主题变化
       systemThemeCleanup = watchSystemTheme((newTheme) => {
         if (setData.value.autoTheme) {
@@ -103,7 +109,7 @@ export const useSettingsStore = defineStore('settings', () => {
       const manualTheme = setData.value.manualTheme || 'light';
       theme.value = manualTheme;
       applyTheme(manualTheme);
-      
+
       // 停止监听系统主题
       if (systemThemeCleanup) {
         systemThemeCleanup();

src/renderer/type/music.ts

@@ -245,16 +245,16 @@ export interface IArtists {
 }
 
 // 音乐源类型定义
-export type MusicSourceType = 
-  | 'tencent' 
-  | 'kugou' 
-  | 'migu' 
-  | 'netease' 
-  | 'joox' 
-  | 'ytmusic' 
-  | 'spotify' 
-  | 'qobuz' 
+export type MusicSourceType =
+  | 'tencent'
+  | 'kugou'
+  | 'migu'
+  | 'netease'
+  | 'joox'
+  | 'ytmusic'
+  | 'spotify'
+  | 'qobuz'
   | 'deezer'
   | 'gdmusic';
-  
+
 // 更多音乐相关的类型可以在这里定义

src/renderer/types/electron.d.ts

@@ -2,17 +2,17 @@ export interface IElectronAPI {
   minimize: () => void;
   maximize: () => void;
   close: () => void;
-  dragStart: (data: string) => void;
+  dragStart: (_data: string) => void;
   miniTray: () => void;
   restart: () => void;
   openLyric: () => void;
-  sendLyric: (data: string) => void;
-  unblockMusic: (id: number) => Promise<string>;
-  onLanguageChanged: (callback: (locale: string) => void) => void;
+  sendLyric: (_data: string) => void;
+  unblockMusic: (_id: number) => Promise<string>;
+  onLanguageChanged: (_callback: (_locale: string) => void) => void;
   store: {
-    get: (key: string) => Promise<any>;
-    set: (key: string, value: any) => Promise<boolean>;
-    delete: (key: string) => Promise<boolean>;
+    get: (_key: string) => Promise<any>;
+    set: (_key: string, _value: any) => Promise<boolean>;
+    delete: (_key: string) => Promise<boolean>;
   };
 }
 

src/renderer/types/music.ts

@@ -2,4 +2,4 @@
 export type Platform = 'qq' | 'migu' | 'kugou' | 'pyncmd' | 'joox' | 'bilibili' | 'gdmusic';
 
 // 默认平台列表
-export const DEFAULT_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili']; 
+export const DEFAULT_PLATFORMS: Platform[] = ['migu', 'kugou', 'pyncmd', 'bilibili'];

src/renderer/utils/appShortcuts.ts

@@ -38,19 +38,21 @@ let appShortcuts: ShortcutsConfig = {};
  */
 export async function handleShortcutAction(action: string) {
   const now = Date.now();
-  
+
   // 如果存在未完成的动作，则忽略当前请求
   if (actionTimeout) {
     console.log('[AppShortcuts] 忽略快速连续的动作请求:', action);
     return;
   }
-  
+
   // 检查是否是同一个动作的重复触发（300ms内）
   if (lastActionInfo.action === action && now - lastActionInfo.timestamp < ACTION_DELAY) {
-    console.log(`[AppShortcuts] 忽略重复的 ${action} 动作，距上次仅 ${now - lastActionInfo.timestamp}ms`);
+    console.log(
+      `[AppShortcuts] 忽略重复的 ${action} 动作，距上次仅 ${now - lastActionInfo.timestamp}ms`
+    );
     return;
   }
-  
+
   // 更新最后一次操作信息
   lastActionInfo = {
     action,
@@ -146,7 +148,9 @@ export async function handleShortcutAction(action: string) {
     // 确保在出错时也能清除超时
     clearTimeout(actionTimeout);
     actionTimeout = null;
-    console.log(`[AppShortcuts] 动作完成: ${action}, 时间戳: ${Date.now()}, 耗时: ${Date.now() - now}ms`);
+    console.log(
+      `[AppShortcuts] 动作完成: ${action}, 时间戳: ${Date.now()}, 耗时: ${Date.now() - now}ms`
+    );
   }
 }
 

src/renderer/utils/fileOperation.ts

@@ -12,6 +12,7 @@ export const selectDirectory = async (message: MessageApi): Promise<string | und
       return result.filePaths[0];
     }
   } catch (error) {
+    console.error('选择目录失败:', error);
     message.error('选择目录失败');
   }
   return undefined;

src/renderer/utils/linearColor.ts

@@ -370,7 +370,7 @@ export const validateColor = (color: string): boolean => {
  */
 export const validateColorContrast = (color: string, theme: 'light' | 'dark'): boolean => {
   if (!validateColor(color)) return false;
-  
+
   const backgroundColor = theme === 'dark' ? '#000000' : '#ffffff';
   const contrast = tinycolor.readability(color, backgroundColor);
   return contrast >= 4.5; // WCAG AA 标准
@@ -386,7 +386,7 @@ export const optimizeColorForTheme = (color: string, theme: 'light' | 'dark'): s
 
   const tc = tinycolor(color);
   const hsl = tc.toHsl();
-  
+
   if (theme === 'dark') {
     // 暗色主题：增加亮度和饱和度
     const optimized = tinycolor({
@@ -394,7 +394,7 @@ export const optimizeColorForTheme = (color: string, theme: 'light' | 'dark'): s
       s: Math.min(hsl.s * 1.1, 1),
       l: Math.max(hsl.l, 0.4) // 确保最小亮度
     });
-    
+
     // 检查对比度，如果不够则进一步调整
     if (!validateColorContrast(optimized.toHexString(), theme)) {
       return tinycolor({
@@ -403,7 +403,7 @@ export const optimizeColorForTheme = (color: string, theme: 'light' | 'dark'): s
         l: Math.max(hsl.l * 1.3, 0.5)
       }).toHexString();
     }
-    
+
     return optimized.toHexString();
   } else {
     // 亮色主题：适当降低亮度
@@ -412,7 +412,7 @@ export const optimizeColorForTheme = (color: string, theme: 'light' | 'dark'): s
       s: Math.min(hsl.s * 1.05, 1),
       l: Math.min(hsl.l, 0.6) // 确保最大亮度
     });
-    
+
     // 检查对比度
     if (!validateColorContrast(optimized.toHexString(), theme)) {
       return tinycolor({
@@ -421,7 +421,7 @@ export const optimizeColorForTheme = (color: string, theme: 'light' | 'dark'): s
         l: Math.min(hsl.l * 0.8, 0.5)
       }).toHexString();
     }
-    
+
     return optimized.toHexString();
   }
 };
@@ -446,13 +446,11 @@ export const getLyricThemeColors = (): LyricThemeColor[] => {
  * 根据主题获取预设颜色的实际值
  */
 export const getPresetColorValue = (colorId: string, theme: 'light' | 'dark'): string => {
-  const color = PRESET_LYRIC_COLORS.find(c => c.id === colorId);
+  const color = PRESET_LYRIC_COLORS.find((c) => c.id === colorId);
   if (!color) return getDefaultHighlightColor(theme);
   return theme === 'dark' ? color.dark : color.light;
 };
 
-
-
 /**
  * 安全加载歌词设置
  */
@@ -461,19 +459,19 @@ const safeLoadLyricSettings = (): LyricSettings => {
     const stored = localStorage.getItem('lyricData');
     if (stored) {
       const parsed = JSON.parse(stored) as LyricSettings;
-      
+
       // 验证 highlightColor 字段
       if (parsed.highlightColor && !validateColor(parsed.highlightColor)) {
         console.warn('Invalid stored highlight color, removing it');
         delete parsed.highlightColor;
       }
-      
+
       return parsed;
     }
   } catch (error) {
     console.error('Failed to load lyric settings:', error);
   }
-  
+
   // 返回默认设置
   return {
     isTop: false,
@@ -501,7 +499,7 @@ export const saveLyricThemeColor = (color: string): void => {
     console.warn('Attempted to save invalid color:', color);
     return;
   }
-  
+
   const settings = safeLoadLyricSettings();
   settings.highlightColor = color;
   safeSaveLyricSettings(settings);
@@ -512,11 +510,11 @@ export const saveLyricThemeColor = (color: string): void => {
  */
 export const loadLyricThemeColor = (): string => {
   const settings = safeLoadLyricSettings();
-  
+
   if (settings.highlightColor && validateColor(settings.highlightColor)) {
     return settings.highlightColor;
   }
-  
+
   // 如果没有保存的颜色或颜色无效，返回默认颜色
   return getDefaultHighlightColor(settings.theme);
 };
@@ -535,10 +533,10 @@ export const resetLyricThemeColor = (): void => {
  */
 export const getCurrentLyricThemeColor = (theme: 'light' | 'dark'): string => {
   const savedColor = loadLyricThemeColor();
-  
+
   if (savedColor && validateColor(savedColor)) {
     return optimizeColorForTheme(savedColor, theme);
   }
-  
+
   return getDefaultHighlightColor(theme);
 };

src/renderer/utils/shortcutToast.ts

@@ -10,11 +10,7 @@ interface ToastOptions {
   showIcon?: boolean;
 }
 
-export function showShortcutToast(
-  message: string, 
-  iconName = '', 
-  options: ToastOptions = {}
-) {
+export function showShortcutToast(message: string, iconName = '', options: ToastOptions = {}) {
   // 如果容器不存在，创建一个新的容器
   if (!container) {
     container = document.createElement('div');

src/renderer/utils/theme.ts

@@ -33,9 +33,9 @@ export const watchSystemTheme = (callback: (theme: ThemeType) => void) => {
     const handler = (e: MediaQueryListEvent) => {
       callback(e.matches ? 'dark' : 'light');
     };
-    
+
     mediaQuery.addEventListener('change', handler);
-    
+
     // 返回清理函数
     return () => {
       mediaQuery.removeEventListener('change', handler);

src/renderer/utils/update.ts

@@ -135,7 +135,7 @@ export const getLatestReleaseInfo = async (): Promise<GithubReleaseInfo | null>
       'https://api.github.com/repos/algerkong/AlgerMusicPlayer/releases/latest',
 
       // 使用代理节点
-      'https://music.alger.fun/package.json',
+      'https://music.alger.fun/package.json'
     ];
 
     if (token) {
@@ -192,15 +192,15 @@ export const formatDate = (dateStr: string): string => {
 export const compareVersions = (v1: string, v2: string): number => {
   const v1Parts = v1.split('.').map(Number);
   const v2Parts = v2.split('.').map(Number);
-  
+
   for (let i = 0; i < Math.max(v1Parts.length, v2Parts.length); i++) {
     const v1Part = v1Parts[i] || 0;
     const v2Part = v2Parts[i] || 0;
-    
+
     if (v1Part > v2Part) return 1;
     if (v1Part < v2Part) return -1;
   }
-  
+
   return 0;
 };
 

src/renderer/views/artist/detail.vue

@@ -34,7 +34,7 @@
               </template>
               {{ t('comp.musicList.playAll') }}
             </n-tooltip>
-            
+
             <n-tooltip placement="bottom" trigger="hover">
               <template #trigger>
                 <div class="action-button hover-green" @click="addToPlaylist">
@@ -44,20 +44,27 @@
               {{ t('comp.musicList.addToPlaylist') }}
             </n-tooltip>
           </div>
-          
+
           <div class="toolbar-right">
             <!-- 布局切换按钮 -->
             <div class="layout-toggle" v-if="!isMobile">
               <n-tooltip placement="bottom" trigger="hover">
                 <template #trigger>
                   <div class="toggle-button hover-green" @click="toggleLayout">
-                    <i class="icon iconfont" :class="isCompactLayout ? 'ri-list-check-2' : 'ri-grid-line'"></i>
+                    <i
+                      class="icon iconfont"
+                      :class="isCompactLayout ? 'ri-list-check-2' : 'ri-grid-line'"
+                    ></i>
                   </div>
                 </template>
-                {{ isCompactLayout ? t('comp.musicList.switchToNormal') : t('comp.musicList.switchToCompact') }}
+                {{
+                  isCompactLayout
+                    ? t('comp.musicList.switchToNormal')
+                    : t('comp.musicList.switchToCompact')
+                }}
               </n-tooltip>
             </div>
-            
+
             <!-- 搜索框 -->
             <div class="search-container" :class="{ 'search-expanded': isSearchVisible }">
               <template v-if="isSearchVisible">
@@ -73,7 +80,10 @@
                     <i class="icon iconfont ri-search-line text-sm"></i>
                   </template>
                   <template #suffix>
-                    <i class="icon iconfont ri-close-line text-sm cursor-pointer" @click="closeSearch"></i>
+                    <i
+                      class="icon iconfont ri-close-line text-sm cursor-pointer"
+                      @click="closeSearch"
+                    ></i>
                   </template>
                 </n-input>
               </template>
@@ -90,13 +100,13 @@
             </div>
           </div>
         </div>
-        
+
         <div class="songs-list">
           <div class="song-list-content">
             <div v-if="filteredSongs.length === 0 && searchKeyword" class="no-result">
               {{ t('comp.musicList.noSearchResults') }}
             </div>
-            
+
             <!-- 替换原来的 v-for 循环为虚拟列表 -->
             <n-virtual-list
               ref="songListRef"
@@ -122,9 +132,13 @@
                 </div>
               </template>
             </n-virtual-list>
-            
+
             <div v-if="songLoading" class="loading-more">{{ t('common.loading') }}</div>
-            <div v-else-if="songPage.hasMore" ref="songsLoadMoreRef" class="load-more-trigger"></div>
+            <div
+              v-else-if="songPage.hasMore"
+              ref="songsLoadMoreRef"
+              class="load-more-trigger"
+            ></div>
           </div>
         </div>
       </n-tab-pane>
@@ -146,7 +160,11 @@
               }"
             />
             <div v-if="albumLoading" class="loading-more">{{ t('common.loading') }}</div>
-            <div v-else-if="albumPage.hasMore" ref="albumsLoadMoreRef" class="load-more-trigger"></div>
+            <div
+              v-else-if="albumPage.hasMore"
+              ref="albumsLoadMoreRef"
+              class="load-more-trigger"
+            ></div>
           </div>
         </div>
       </n-tab-pane>
@@ -164,11 +182,20 @@
 
 <script setup lang="ts">
 import { useDateFormat } from '@vueuse/core';
-import { computed, onMounted, onUnmounted, ref, watch, nextTick, onActivated, onDeactivated } from 'vue';
+import { useMessage } from 'naive-ui';
+import PinyinMatch from 'pinyin-match';
+import {
+  computed,
+  nextTick,
+  onActivated,
+  onDeactivated,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch
+} from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import PinyinMatch from 'pinyin-match';
-import { useMessage } from 'naive-ui';
 
 import { getArtistAlbums, getArtistDetail, getArtistTopSongs } from '@/api/artist';
 import { getMusicDetail } from '@/api/music';
@@ -232,7 +259,9 @@ const getCacheKey = (id: string | number) => `artist_${id}`;
 // 搜索和布局相关
 const searchKeyword = ref('');
 const isSearchVisible = ref(false);
-const isCompactLayout = ref(isMobile.value ? false : localStorage.getItem('musicListLayout') === 'compact');
+const isCompactLayout = ref(
+  isMobile.value ? false : localStorage.getItem('musicListLayout') === 'compact'
+);
 
 // 加载歌手信息
 const loadArtistInfo = async () => {
@@ -261,7 +290,7 @@ const loadArtistInfo = async () => {
     // 重置分页并加载初始数据
     resetPagination();
     await Promise.all([loadSongs(), loadAlbums()]);
-    
+
     // 保存到缓存
     artistDataCache.set(cacheKey, {
       artistInfo: artistInfo.value,
@@ -439,46 +468,48 @@ const toggleLayout = () => {
 // 播放全部
 const handlePlayAll = () => {
   if (filteredSongs.value.length === 0) return;
-  
-  playerStore.setPlayList(filteredSongs.value.map(song => ({
-    ...song,
-    picUrl: song.al.picUrl
-  })));
-  
+
+  playerStore.setPlayList(
+    filteredSongs.value.map((song) => ({
+      ...song,
+      picUrl: song.al.picUrl
+    }))
+  );
+
   // 开始播放第一首
   playerStore.setPlay(filteredSongs.value[0]);
-  
+
   message.success(t('comp.musicList.playAll'));
 };
 
 // 添加到播放列表
 const addToPlaylist = () => {
   if (filteredSongs.value.length === 0) return;
-  
+
   // 获取当前播放列表
   const currentList = playerStore.playList;
-  
+
   // 添加歌曲到播放列表(避免重复添加)
-  const newSongs = filteredSongs.value.filter(song => 
-    !currentList.some(item => item.id === song.id)
+  const newSongs = filteredSongs.value.filter(
+    (song) => !currentList.some((item) => item.id === song.id)
   );
-  
+
   if (newSongs.length === 0) {
     message.info(t('comp.musicList.songsAlreadyInPlaylist'));
     return;
   }
-  
+
   // 合并到当前播放列表末尾
   const newList = [
-    ...currentList, 
-    ...newSongs.map(song => ({
+    ...currentList,
+    ...newSongs.map((song) => ({
       ...song,
       picUrl: song.al.picUrl
     }))
   ];
-  
+
   playerStore.setPlayList(newList);
-  
+
   message.success(t('comp.musicList.addToPlaylistSuccess', { count: newSongs.length }));
 };
 
@@ -486,27 +517,27 @@ const handlePlay = (song?: any) => {
   // 如果传入了特定歌曲（点击单曲播放），则将其作为播放列表的第一首
   if (song) {
     const songList = [...filteredSongs.value];
-    const index = songList.findIndex(item => item.id === song.id);
-    
+    const index = songList.findIndex((item) => item.id === song.id);
+
     if (index !== -1) {
       // 将点击的歌曲移到第一位
       const clickedSong = songList.splice(index, 1)[0];
       songList.unshift(clickedSong);
     }
-    
+
     playerStore.setPlayList(
-      songList.map(item => ({
+      songList.map((item) => ({
         ...item,
         picUrl: item.al?.picUrl || item.picUrl
       }))
     );
-    
+
     // 设置当前播放歌曲
     playerStore.setPlay(song);
   } else {
     // 默认行为：播放整个过滤后的列表
     playerStore.setPlayList(
-      filteredSongs.value.map(item => ({
+      filteredSongs.value.map((item) => ({
         ...item,
         picUrl: item.al?.picUrl || item.picUrl
       }))
@@ -519,7 +550,7 @@ const setupObservers = () => {
   // 清理之前的观察器
   if (songsObserver) songsObserver.disconnect();
   if (albumsObserver) albumsObserver.disconnect();
-  
+
   // 创建观察器(如果不存在)
   if (!songsObserver) {
     songsObserver = new IntersectionObserver(
@@ -531,7 +562,7 @@ const setupObservers = () => {
       { threshold: 0.1 }
     );
   }
-  
+
   if (!albumsObserver) {
     albumsObserver = new IntersectionObserver(
       (entries) => {
@@ -542,7 +573,7 @@ const setupObservers = () => {
       { threshold: 0.1 }
     );
   }
-  
+
   // 观察当前标签页的元素
   nextTick(() => {
     if (activeTab.value === 'songs' && songsLoadMoreRef.value) {
@@ -574,7 +605,7 @@ onActivated(() => {
   // 确保当前路由是艺术家详情页
   if (route.name === 'artistDetail') {
     const currentId = route.params.id as string;
-    
+
     // 首次加载或ID变化时加载数据
     if (!previousId.value || previousId.value !== currentId) {
       console.log('ID已变化，加载新数据');
@@ -582,7 +613,7 @@ onActivated(() => {
       activeTab.value = 'songs';
       loadArtistInfo();
     }
-    
+
     // 重新设置观察器
     setupObservers();
   }
@@ -716,16 +747,17 @@ const handleVirtualScroll = (e: any) => {
       @apply text-sm leading-relaxed whitespace-pre-wrap;
     }
   }
-  
+
   // 添加歌曲工具栏样式
   .songs-toolbar {
     @apply flex items-center justify-between mb-4;
-    
-    .toolbar-left, .toolbar-right {
+
+    .toolbar-left,
+    .toolbar-right {
       @apply flex items-center gap-2;
     }
   }
-  
+
   // 搜索框样式
   .search-container {
     @apply max-w-md transition-all duration-300 ease-in-out;
@@ -736,7 +768,7 @@ const handleVirtualScroll = (e: any) => {
 
     .search-button {
       @apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors text-gray-500 dark:text-gray-400 hover:text-green-500;
-      
+
       .icon {
         @apply text-lg;
       }
@@ -746,28 +778,28 @@ const handleVirtualScroll = (e: any) => {
       @apply bg-light-200 dark:bg-dark-200;
     }
   }
-  
+
   // 操作按钮样式
   .layout-toggle .toggle-button,
   .action-button {
     @apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors text-gray-500 dark:text-gray-400;
-    
+
     .icon {
       @apply text-lg;
     }
-    
+
     &.hover-green:hover {
       .icon {
         @apply text-green-500;
       }
     }
   }
-  
+
   // 搜索无结果样式
   .no-result {
     @apply text-center py-8 text-gray-500 dark:text-gray-400;
   }
-  
+
   // 虚拟列表样式
   .song-virtual-list {
     :deep(.n-virtual-list__scroll) {
@@ -780,14 +812,14 @@ const handleVirtualScroll = (e: any) => {
       }
     }
   }
-  
+
   .double-item {
     @apply mb-2 bg-light-100 bg-opacity-30 dark:bg-dark-100 dark:bg-opacity-20 rounded-3xl;
   }
 }
 
 .mobile {
-  .songs-toolbar{
+  .songs-toolbar {
     @apply mb-0;
   }
 }

src/renderer/views/bilibili/BilibiliPlayer.vue

@@ -425,7 +425,7 @@ const playCurrentAudio = async () => {
 
     // 播放当前选中的分P
     console.log('播放当前选中的分P:', currentAudio.name, '音频URL:', currentAudio.playMusicUrl);
-    playerStore.setPlay(currentAudio);  
+    playerStore.setPlay(currentAudio);
 
     // 播放后通知用户已开始播放
     message.success('已开始播放');

src/renderer/views/download/DownloadPage.vue

@@ -8,16 +8,16 @@
           {{ t('download.settings') }}
         </n-button>
         <div class="segment-control">
-          <div 
-            class="segment-item" 
-            :class="{ 'active': tabName === 'downloading' }"
+          <div
+            class="segment-item"
+            :class="{ active: tabName === 'downloading' }"
             @click="tabName = 'downloading'"
           >
             {{ t('download.tabs.downloading') }}
           </div>
-          <div 
-            class="segment-item" 
-            :class="{ 'active': tabName === 'downloaded' }"
+          <div
+            class="segment-item"
+            :class="{ active: tabName === 'downloaded' }"
             @click="tabName = 'downloaded'"
           >
             {{ t('download.tabs.downloaded') }}
@@ -25,7 +25,7 @@
         </div>
       </div>
     </div>
-    
+
     <div class="page-content">
       <!-- 下载列表 -->
       <div v-show="tabName === 'downloading'" class="tab-content">
@@ -42,20 +42,15 @@
                 <div class="progress-title">
                   {{ t('download.progress.total', { progress: totalProgress.toFixed(1) }) }}
                 </div>
-                <div class="progress-info">
-                  {{ downloadList.length }} {{ t('download.items') }}
-                </div>
+                <div class="progress-info">{{ downloadList.length }} {{ t('download.items') }}</div>
               </div>
               <div class="progress-bar-wrapper">
                 <div class="progress-bar">
-                  <div 
-                    class="progress-fill" 
-                    :style="{ width: `${totalProgress}%` }"
-                  ></div>
+                  <div class="progress-fill" :style="{ width: `${totalProgress}%` }"></div>
                 </div>
               </div>
             </div>
-            
+
             <div class="download-items">
               <div v-for="item in downloadList" :key="item.path" class="download-item">
                 <div class="item-left flex items-center gap-3">
@@ -63,17 +58,23 @@
                     <img :src="getImgUrl(item.songInfo?.picUrl, '200y200')" alt="Cover" />
                   </div>
                   <div class="item-info flex items-center gap-4 w-full">
-                    <div class="item-name min-w-[160px] max-w-[160px] truncate" :title="item.filename">
+                    <div
+                      class="item-name min-w-[160px] max-w-[160px] truncate"
+                      :title="item.filename"
+                    >
                       {{ item.filename }}
                     </div>
                     <div class="item-artist min-w-[120px] max-w-[120px] truncate">
-                      {{ item.songInfo?.ar?.map((a) => a.name).join(', ') || t('download.artist.unknown') }}
+                      {{
+                        item.songInfo?.ar?.map((a) => a.name).join(', ') ||
+                        t('download.artist.unknown')
+                      }}
                     </div>
                     <div class="item-progress flex-1 min-w-0">
                       <div class="progress-bar">
-                        <div 
-                          class="progress-fill" 
-                          :class="[`status-${item.status}`]" 
+                        <div
+                          class="progress-fill"
+                          :class="[`status-${item.status}`]"
                           :style="{ width: `${item.progress}%` }"
                         ></div>
                       </div>
@@ -119,17 +120,22 @@
                 <span>{{ t('download.clearAll') }}</span>
               </button>
             </div>
-            
+
             <div class="downloaded-items">
               <div v-for="item in downList" :key="item.path" class="downloaded-item">
                 <div class="item-cover">
                   <img :src="getImgUrl(item.picUrl, '200y200')" alt="Cover" />
                 </div>
                 <div class="item-info flex items-center gap-4 w-full">
-                  <div class="item-name min-w-[160px] max-w-[160px] truncate" :title="item.displayName || item.filename">
+                  <div
+                    class="item-name min-w-[160px] max-w-[160px] truncate"
+                    :title="item.displayName || item.filename"
+                  >
                     {{ item.displayName || item.filename }}
                   </div>
-                  <div class="item-artist min-w-[120px] max-w-[120px] flex items-center gap-1 truncate">
+                  <div
+                    class="item-artist min-w-[120px] max-w-[120px] flex items-center gap-1 truncate"
+                  >
                     <i class="iconfont ri-user-line"></i>
                     <span>{{ item.ar?.map((a) => a.name).join(', ') }}</span>
                   </div>
@@ -137,7 +143,10 @@
                     <i class="iconfont ri-file-line"></i>
                     <span>{{ formatSize(item.size) }}</span>
                   </div>
-                  <div class="item-path min-w-[220px] max-w-[220px] flex items-center gap-1" :title="item.path">
+                  <div
+                    class="item-path min-w-[220px] max-w-[220px] flex items-center gap-1"
+                    :title="item.path"
+                  >
                     <i class="iconfont ri-folder-path-line"></i>
                     <span>{{ shortenPath(item.path) }}</span>
                     <button class="copy-button" @click="copyPath(item.path)">
@@ -172,7 +181,11 @@
         <span>{{ t('download.delete.title') }}</span>
       </div>
       <div class="modal-body">
-        {{ t('download.delete.message', { filename: itemToDelete?.displayName || itemToDelete?.filename }) }}
+        {{
+          t('download.delete.message', {
+            filename: itemToDelete?.displayName || itemToDelete?.filename
+          })
+        }}
       </div>
       <div class="modal-footer">
         <button class="modal-btn cancel" @click="showDeleteConfirm = false">
@@ -223,14 +236,16 @@
           <div class="setting-title">{{ t('download.settingsPanel.path') }}</div>
           <div class="setting-desc">{{ t('download.settingsPanel.pathDesc') }}</div>
           <div class="flex flex-col gap-2 mt-2">
-            <n-input 
-              v-model:value="downloadSettings.path" 
+            <n-input
+              v-model:value="downloadSettings.path"
               :placeholder="t('download.settingsPanel.pathPlaceholder')"
               readonly
               class="flex-1"
             />
             <div class="flex items-center gap-2">
-              <n-button class="flex-1" @click="selectDownloadPath">{{ t('download.settingsPanel.select') }}</n-button>
+              <n-button class="flex-1" @click="selectDownloadPath">{{
+                t('download.settingsPanel.select')
+              }}</n-button>
               <n-button class="flex-1" @click="openDownloadPath">
                 {{ t('download.settingsPanel.open') }}
                 <i class="iconfont ri-folder-open-line"></i>
@@ -243,24 +258,28 @@
         <div class="setting-item">
           <div class="setting-title">{{ t('download.settingsPanel.fileFormat') }}</div>
           <div class="setting-desc">{{ t('download.settingsPanel.fileFormatDesc') }}</div>
-          
+
           <!-- 预设模板 -->
           <div class="flex gap-2 my-2">
-            <n-button 
-              size="small" 
-              :type="downloadSettings.nameFormat === '{songName} - {artistName}' ? 'primary' : 'default'"
+            <n-button
+              size="small"
+              :type="
+                downloadSettings.nameFormat === '{songName} - {artistName}' ? 'primary' : 'default'
+              "
               @click="downloadSettings.nameFormat = '{songName} - {artistName}'"
             >
               {{ t('download.settingsPanel.presets.songArtist') }}
             </n-button>
-            <n-button 
+            <n-button
               size="small"
-              :type="downloadSettings.nameFormat === '{artistName} - {songName}' ? 'primary' : 'default'"
+              :type="
+                downloadSettings.nameFormat === '{artistName} - {songName}' ? 'primary' : 'default'
+              "
               @click="downloadSettings.nameFormat = '{artistName} - {songName}'"
             >
               {{ t('download.settingsPanel.presets.artistSong') }}
             </n-button>
-            <n-button 
+            <n-button
               size="small"
               :type="downloadSettings.nameFormat === '{songName}' ? 'primary' : 'default'"
               @click="downloadSettings.nameFormat = '{songName}'"
@@ -268,33 +287,35 @@
               {{ t('download.settingsPanel.presets.songOnly') }}
             </n-button>
           </div>
-          
+
           <!-- 分隔符设置 -->
           <div class="my-3">
-            <div class="text-sm text-gray-500 mb-2">{{ t('download.settingsPanel.separator') || '分隔符' }}</div>
+            <div class="text-sm text-gray-500 mb-2">
+              {{ t('download.settingsPanel.separator') || '分隔符' }}
+            </div>
             <div class="flex items-center gap-2">
-              <n-button 
-                size="small" 
+              <n-button
+                size="small"
                 :type="downloadSettings.separator === ' - ' ? 'primary' : 'default'"
                 @click="downloadSettings.separator = ' - '"
               >
                 {{ t('download.settingsPanel.separators.dash') || '空格-空格' }}
               </n-button>
-              <n-button 
-                size="small" 
+              <n-button
+                size="small"
                 :type="downloadSettings.separator === '_' ? 'primary' : 'default'"
                 @click="downloadSettings.separator = '_'"
               >
                 {{ t('download.settingsPanel.separators.underscore') || '下划线' }}
               </n-button>
-              <n-button 
-                size="small" 
+              <n-button
+                size="small"
                 :type="downloadSettings.separator === ' ' ? 'primary' : 'default'"
                 @click="downloadSettings.separator = ' '"
               >
                 {{ t('download.settingsPanel.separators.space') || '空格' }}
               </n-button>
-              <n-input 
+              <n-input
                 v-model:value="downloadSettings.separator"
                 size="small"
                 style="width: 100px"
@@ -302,35 +323,71 @@
               />
             </div>
           </div>
-          
+
           <!-- 组件排序 -->
           <div class="my-3">
-            <div class="text-sm text-gray-500 mb-2">{{ t('download.settingsPanel.dragToArrange') }}</div>
+            <div class="text-sm text-gray-500 mb-2">
+              {{ t('download.settingsPanel.dragToArrange') }}
+            </div>
             <div class="format-components">
-              <div v-for="(component, index) in formatComponents" :key="component.id" class="format-item">
+              <div
+                v-for="(component, index) in formatComponents"
+                :key="component.id"
+                class="format-item"
+              >
                 <div class="flex items-center justify-between w-full">
                   <span>{{ t(`download.settingsPanel.components.${component.type}`) }}</span>
                   <div class="flex items-center">
-                    <n-button quaternary circle size="small" @click="handleMoveUp(index)" :disabled="index === 0">
+                    <n-button
+                      quaternary
+                      circle
+                      size="small"
+                      @click="handleMoveUp(index)"
+                      :disabled="index === 0"
+                    >
                       <template #icon><i class="iconfont ri-arrow-up-s-line"></i></template>
                     </n-button>
-                    <n-button quaternary circle size="small" @click="handleMoveDown(index)" :disabled="index === formatComponents.length - 1">
+                    <n-button
+                      quaternary
+                      circle
+                      size="small"
+                      @click="handleMoveDown(index)"
+                      :disabled="index === formatComponents.length - 1"
+                    >
                       <template #icon><i class="iconfont ri-arrow-down-s-line"></i></template>
                     </n-button>
-                    <n-button quaternary circle size="small" @click="removeFormatComponent(index)" :disabled="formatComponents.length <= 1">
+                    <n-button
+                      quaternary
+                      circle
+                      size="small"
+                      @click="removeFormatComponent(index)"
+                      :disabled="formatComponents.length <= 1"
+                    >
                       <template #icon><i class="iconfont ri-close-line"></i></template>
                     </n-button>
                   </div>
                 </div>
               </div>
               <div class="mt-2 flex gap-2">
-                <n-button size="small" @click="addFormatComponent('songName')" :disabled="formatComponents.some(c => c.type === 'songName')">
+                <n-button
+                  size="small"
+                  @click="addFormatComponent('songName')"
+                  :disabled="formatComponents.some((c) => c.type === 'songName')"
+                >
                   +{{ t('download.settingsPanel.components.songName') }}
                 </n-button>
-                <n-button size="small" @click="addFormatComponent('artistName')" :disabled="formatComponents.some(c => c.type === 'artistName')">
+                <n-button
+                  size="small"
+                  @click="addFormatComponent('artistName')"
+                  :disabled="formatComponents.some((c) => c.type === 'artistName')"
+                >
                   +{{ t('download.settingsPanel.components.artistName') }}
                 </n-button>
-                <n-button size="small" @click="addFormatComponent('albumName')" :disabled="formatComponents.some(c => c.type === 'albumName')">
+                <n-button
+                  size="small"
+                  @click="addFormatComponent('albumName')"
+                  :disabled="formatComponents.some((c) => c.type === 'albumName')"
+                >
                   +{{ t('download.settingsPanel.components.albumName') }}
                 </n-button>
               </div>
@@ -339,16 +396,18 @@
 
           <!-- 自定义格式 -->
           <div class="my-3">
-            <div class="text-sm text-gray-500 mb-2">{{ t('download.settingsPanel.customFormat') }}</div>
-            <n-input 
-              v-model:value="downloadSettings.nameFormat" 
+            <div class="text-sm text-gray-500 mb-2">
+              {{ t('download.settingsPanel.customFormat') }}
+            </div>
+            <n-input
+              v-model:value="downloadSettings.nameFormat"
               placeholder="{artistName} - {songName} - {albumName}"
             />
           </div>
 
           <div class="mt-2 text-xs text-amber-500">
             <i class="iconfont ri-information-line"></i>
-            {{ t('download.settingsPanel.formatVariables') }}:<br>
+            {{ t('download.settingsPanel.formatVariables') }}:<br />
             {songName}, {artistName}, {albumName}
           </div>
 
@@ -358,8 +417,6 @@
             <div class="preview-content">{{ formatNamePreview }}</div>
           </div>
         </div>
-
-     
       </div>
     </n-drawer-content>
   </n-drawer>
@@ -372,8 +429,8 @@ import { useI18n } from 'vue-i18n';
 
 import { getMusicDetail } from '@/api/music';
 import { usePlayerStore } from '@/store/modules/player';
-import { getImgUrl } from '@/utils';
 import type { SongResult } from '@/type/music';
+import { getImgUrl } from '@/utils';
 
 const { t } = useI18n();
 const playerStore = usePlayerStore();
@@ -446,11 +503,12 @@ const formatSize = (bytes: number) => {
 
 // 复制文件路径
 const copyPath = (path: string) => {
-  navigator.clipboard.writeText(path)
+  navigator.clipboard
+    .writeText(path)
     .then(() => {
       message.success(t('download.path.copied'));
     })
-    .catch(err => {
+    .catch((err) => {
       console.error('复制失败:', err);
       message.error(t('download.path.copyFailed'));
     });
@@ -459,20 +517,20 @@ const copyPath = (path: string) => {
 // 格式化路径
 const shortenPath = (path: string) => {
   if (!path) return '';
-  
+
   // 获取文件名和目录
   const parts = path.split(/[/\\]/);
   const fileName = parts.pop() || '';
-  
+
   // 如果路径很短，直接返回
   if (path.length < 30) return path;
-  
+
   // 保留开头的部分目录和结尾的文件名
   if (parts.length <= 2) return path;
-  
+
   const start = parts.slice(0, 1).join('/');
   const end = parts.slice(-1).join('/');
-  
+
   return `${start}/.../${end}/${fileName}`;
 };
 
@@ -493,7 +551,7 @@ const handlePlayMusic = async (item: DownloadedItem) => {
   try {
     // 先检查文件是否存在
     const fileExists = await window.electron.ipcRenderer.invoke('check-file-exists', item.path);
-    
+
     if (!fileExists) {
       message.error(t('download.delete.fileNotFound', { name: item.displayName || item.filename }));
       return;
@@ -503,20 +561,21 @@ const handlePlayMusic = async (item: DownloadedItem) => {
     const song: SongResult = {
       id: item.id,
       name: item.displayName || item.filename,
-      ar: item.ar?.map(a => ({
-        id: 0,
-        name: a.name,
-        picId: 0,
-        img1v1Id: 0,
-        briefDesc: '',
-        picUrl: '',
-        img1v1Url: '',
-        albumSize: 0,
-        alias: [],
-        trans: '',
-        musicSize: 0,
-        topicPerson: 0
-      })) || [],
+      ar:
+        item.ar?.map((a) => ({
+          id: 0,
+          name: a.name,
+          picId: 0,
+          img1v1Id: 0,
+          briefDesc: '',
+          picUrl: '',
+          img1v1Url: '',
+          albumSize: 0,
+          alias: [],
+          trans: '',
+          musicSize: 0,
+          topicPerson: 0
+        })) || [],
       al: {
         name: item.filename,
         id: 0,
@@ -537,7 +596,7 @@ const handlePlayMusic = async (item: DownloadedItem) => {
     await playerStore.setPlay(song);
     playerStore.setPlayMusic(true);
     playerStore.setIsPlay(true);
-    
+
     message.success(t('download.playStarted', { name: item.displayName || item.filename }));
   } catch (error) {
     console.error('播放音乐失败:', error);
@@ -561,13 +620,10 @@ const confirmDelete = async () => {
   if (!item) return;
 
   try {
-    const success = await window.electron.ipcRenderer.invoke(
-      'delete-downloaded-music',
-      item.path
-    );
+    const success = await window.electron.ipcRenderer.invoke('delete-downloaded-music', item.path);
 
     if (success) {
-      const newList = downloadedList.value.filter(i => i.id !== item.id);
+      const newList = downloadedList.value.filter((i) => i.id !== item.id);
       downloadedList.value = newList;
       localStorage.setItem('downloadedList', JSON.stringify(newList));
       message.success(t('download.delete.success'));
@@ -607,15 +663,15 @@ const isLoadingDownloaded = ref(false);
 // 格式化歌曲名称，应用用户设置的格式
 const formatSongName = (songInfo) => {
   if (!songInfo) return '';
-  
+
   // 获取格式设置
   const nameFormat = downloadSettings.value.nameFormat || '{songName} - {artistName}';
-  
+
   // 准备替换变量
   const artistName = songInfo.ar?.map((a) => a.name).join('/') || '未知艺术家';
   const songName = songInfo.name || songInfo.filename || '未知歌曲';
   const albumName = songInfo.al?.name || '未知专辑';
-  
+
   // 应用自定义格式
   return nameFormat
     .replace(/\{songName\}/g, songName)
@@ -626,25 +682,25 @@ const formatSongName = (songInfo) => {
 // 获取已下载音乐列表
 const refreshDownloadedList = async () => {
   if (isLoadingDownloaded.value) return; // 防止重复加载
-  
+
   try {
     isLoadingDownloaded.value = true;
     const list = await window.electron.ipcRenderer.invoke('get-downloaded-music');
-    
+
     if (!Array.isArray(list) || list.length === 0) {
       downloadedList.value = [];
       localStorage.setItem('downloadedList', '[]');
       return;
     }
 
-    const songIds = list.filter(item => item.id).map(item => item.id);
+    const songIds = list.filter((item) => item.id).map((item) => item.id);
     if (songIds.length === 0) {
       // 处理显示格式化文件名
-      const updatedList = list.map(item => ({
+      const updatedList = list.map((item) => ({
         ...item,
         displayName: formatSongName(item) || item.filename
       }));
-      
+
       downloadedList.value = updatedList;
       localStorage.setItem('downloadedList', JSON.stringify(updatedList));
       return;
@@ -657,7 +713,7 @@ const refreshDownloadedList = async () => {
         return acc;
       }, {});
 
-      const updatedList = list.map(item => {
+      const updatedList = list.map((item) => {
         const songDetail = songDetails[item.id];
         const updatedItem = {
           ...item,
@@ -665,7 +721,7 @@ const refreshDownloadedList = async () => {
           ar: songDetail?.ar || item.ar || [{ name: t('download.localMusic') }],
           name: songDetail?.name || item.name || item.filename
         };
-        
+
         // 添加格式化的显示名称
         updatedItem.displayName = formatSongName(updatedItem) || updatedItem.filename;
         return updatedItem;
@@ -676,11 +732,11 @@ const refreshDownloadedList = async () => {
     } catch (error) {
       console.error('Failed to get music details:', error);
       // 处理显示格式化文件名
-      const updatedList = list.map(item => ({
+      const updatedList = list.map((item) => ({
         ...item,
         displayName: formatSongName(item) || item.filename
       }));
-      
+
       downloadedList.value = updatedList;
       localStorage.setItem('downloadedList', JSON.stringify(updatedList));
     }
@@ -750,21 +806,21 @@ onMounted(() => {
     // 下载成功处理
     if (data.success) {
       // 从下载列表中移除
-      downloadList.value = downloadList.value.filter(item => item.filename !== data.filename);
-      
+      downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
+
       // 延迟刷新已下载列表，避免文件系统未完全写入
       setTimeout(() => refreshDownloadedList(), 500);
-      
+
       // 只在下载页面显示一次下载成功通知
       message.success(t('download.message.downloadComplete', { filename: data.filename }));
-      
+
       // 避免通知过多占用内存，设置一个超时来清理已处理的标记
       setTimeout(() => {
         processedDownloads.delete(data.filename);
       }, 10000); // 10秒后清除
     } else {
       // 下载失败处理
-      const existingItem = downloadList.value.find(item => item.filename === data.filename);
+      const existingItem = downloadList.value.find((item) => item.filename === data.filename);
       if (existingItem) {
         Object.assign(existingItem, {
           status: 'error',
@@ -772,12 +828,14 @@ onMounted(() => {
           progress: 0
         });
         setTimeout(() => {
-          downloadList.value = downloadList.value.filter(item => item.filename !== data.filename);
+          downloadList.value = downloadList.value.filter((item) => item.filename !== data.filename);
           processedDownloads.delete(data.filename);
         }, 3000);
       }
-      
-      message.error(t('download.message.downloadFailed', { filename: data.filename, error: data.error }));
+
+      message.error(
+        t('download.message.downloadFailed', { filename: data.filename, error: data.error })
+      );
     }
   });
 
@@ -809,7 +867,7 @@ const downloadSettings = ref({
 // 格式组件（用于拖拽排序）
 const formatComponents = ref([
   { id: 1, type: 'songName' },
-  { id: 2, type: 'artistName' },
+  { id: 2, type: 'artistName' }
 ]);
 
 // 处理组件排序
@@ -829,7 +887,7 @@ const handleMoveDown = (index: number) => {
 
 // 添加新的格式组件
 const addFormatComponent = (type: string) => {
-  if (!formatComponents.value.some(item => item.type === type)) {
+  if (!formatComponents.value.some((item) => item.type === type)) {
     formatComponents.value.push({
       id: Date.now(),
       type
@@ -843,31 +901,38 @@ const removeFormatComponent = (index: number) => {
 };
 
 // 监听组件变化更新格式
-watch(formatComponents, (newComponents) => {
-  let format = '';
-  newComponents.forEach((component, index) => {
-    format += `{${component.type}}`;
-    if (index < newComponents.length - 1) {
-      format += downloadSettings.value.separator;
-    }
-  });
-  downloadSettings.value.nameFormat = format;
-}, { deep: true });
-
-// 监听分隔符变化更新格式
-watch(() => downloadSettings.value.separator, (newSeparator) => {
-  if (formatComponents.value.length > 1) {
-    // 重新构建格式字符串
+watch(
+  formatComponents,
+  (newComponents) => {
     let format = '';
-    formatComponents.value.forEach((component, index) => {
+    newComponents.forEach((component, index) => {
       format += `{${component.type}}`;
-      if (index < formatComponents.value.length - 1) {
-        format += newSeparator;
+      if (index < newComponents.length - 1) {
+        format += downloadSettings.value.separator;
       }
     });
     downloadSettings.value.nameFormat = format;
+  },
+  { deep: true }
+);
+
+// 监听分隔符变化更新格式
+watch(
+  () => downloadSettings.value.separator,
+  (newSeparator) => {
+    if (formatComponents.value.length > 1) {
+      // 重新构建格式字符串
+      let format = '';
+      formatComponents.value.forEach((component, index) => {
+        format += `{${component.type}}`;
+        if (index < formatComponents.value.length - 1) {
+          format += newSeparator;
+        }
+      });
+      downloadSettings.value.nameFormat = format;
+    }
   }
-});
+);
 
 // 格式名称预览
 const formatNamePreview = computed(() => {
@@ -898,15 +963,27 @@ const openDownloadPath = () => {
 // 保存下载设置
 const saveDownloadSettings = () => {
   // 保存到配置
-  window.electron.ipcRenderer.send('set-store-value', 'set.downloadPath', downloadSettings.value.path);
-  window.electron.ipcRenderer.send('set-store-value', 'set.downloadNameFormat', downloadSettings.value.nameFormat);
-  window.electron.ipcRenderer.send('set-store-value', 'set.downloadSeparator', downloadSettings.value.separator);
-  
+  window.electron.ipcRenderer.send(
+    'set-store-value',
+    'set.downloadPath',
+    downloadSettings.value.path
+  );
+  window.electron.ipcRenderer.send(
+    'set-store-value',
+    'set.downloadNameFormat',
+    downloadSettings.value.nameFormat
+  );
+  window.electron.ipcRenderer.send(
+    'set-store-value',
+    'set.downloadSeparator',
+    downloadSettings.value.separator
+  );
+
   // 如果是在已下载页面，刷新列表以更新显示
   if (tabName.value === 'downloaded') {
     refreshDownloadedList();
   }
-  
+
   message.success(t('download.settingsPanel.saveSuccess'));
   showSettingsDrawer.value = false;
 };
@@ -915,11 +992,17 @@ const saveDownloadSettings = () => {
 const initDownloadSettings = async () => {
   // 获取当前配置
   const path = await window.electron.ipcRenderer.invoke('get-store-value', 'set.downloadPath');
-  const nameFormat = await window.electron.ipcRenderer.invoke('get-store-value', 'set.downloadNameFormat');
-  const separator = await window.electron.ipcRenderer.invoke('get-store-value', 'set.downloadSeparator');
-  
+  const nameFormat = await window.electron.ipcRenderer.invoke(
+    'get-store-value',
+    'set.downloadNameFormat'
+  );
+  const separator = await window.electron.ipcRenderer.invoke(
+    'get-store-value',
+    'set.downloadSeparator'
+  );
+
   downloadSettings.value = {
-    path: path || await window.electron.ipcRenderer.invoke('get-downloads-path'),
+    path: path || (await window.electron.ipcRenderer.invoke('get-downloads-path')),
     nameFormat: nameFormat || '{songName} - {artistName}',
     separator: separator || ' - '
   };
@@ -933,7 +1016,7 @@ const updateFormatComponents = () => {
   // 提取格式中的变量
   const format = downloadSettings.value.nameFormat;
   const matches = Array.from(format.matchAll(/\{(\w+)\}/g));
-  
+
   if (matches.length === 0) {
     formatComponents.value = [
       { id: 1, type: 'songName' },
@@ -941,7 +1024,7 @@ const updateFormatComponents = () => {
     ];
     return;
   }
-  
+
   formatComponents.value = matches.map((match, index) => ({
     id: index + 1,
     type: match[1]
@@ -952,18 +1035,21 @@ const updateFormatComponents = () => {
 watch(() => downloadSettings.value.nameFormat, updateFormatComponents);
 
 // 监听命名格式变化，更新已下载文件的显示名称
-watch(() => downloadSettings.value.nameFormat, () => {
-  if (downloadedList.value.length > 0) {
-    // 更新所有已下载项的显示名称
-    downloadedList.value = downloadedList.value.map(item => ({
-      ...item,
-      displayName: formatSongName(item) || item.filename
-    }));
-    
-    // 保存到本地存储
-    localStorage.setItem('downloadedList', JSON.stringify(downloadedList.value));
+watch(
+  () => downloadSettings.value.nameFormat,
+  () => {
+    if (downloadedList.value.length > 0) {
+      // 更新所有已下载项的显示名称
+      downloadedList.value = downloadedList.value.map((item) => ({
+        ...item,
+        displayName: formatSongName(item) || item.filename
+      }));
+
+      // 保存到本地存储
+      localStorage.setItem('downloadedList', JSON.stringify(downloadedList.value));
+    }
   }
-});
+);
 
 // 初始化
 onMounted(() => {
@@ -1005,7 +1091,7 @@ onMounted(() => {
   @apply text-gray-500 dark:text-gray-400;
   @apply transition-all duration-200;
   @apply hover:bg-light-300 dark:hover:bg-dark-300;
-  
+
   &.active {
     @apply bg-white dark:bg-dark-200;
     @apply text-gray-900 dark:text-gray-100;
@@ -1091,11 +1177,11 @@ onMounted(() => {
   &.status-downloading {
     @apply bg-primary;
   }
-  
+
   &.status-completed {
     @apply bg-green-500;
   }
-  
+
   &.status-error {
     @apply bg-red-500;
   }
@@ -1112,63 +1198,63 @@ onMounted(() => {
   @apply border border-gray-200/60 dark:border-gray-700/50;
   @apply shadow-sm;
   @apply transition-all duration-300;
-  
+
   &:hover {
     @apply shadow-md;
     @apply transform -translate-y-0.5;
   }
-  
+
   .item-left {
     @apply flex gap-3;
   }
-  
+
   .item-cover {
     @apply w-12 h-12 rounded-md overflow-hidden;
     @apply flex-shrink-0;
     @apply bg-gray-100 dark:bg-dark-300;
     @apply shadow-sm;
-    
+
     img {
       @apply w-full h-full object-cover;
     }
   }
-  
+
   .item-info {
     @apply flex-1 min-w-0 flex items-center justify-between;
   }
-  
+
   .item-name {
     @apply text-sm font-medium truncate;
   }
-  
+
   .item-artist {
     @apply text-xs text-gray-500 dark:text-gray-400;
   }
-  
+
   .item-progress {
     @apply mb-2;
   }
-  
+
   .item-details {
     @apply flex justify-between items-center;
   }
-  
+
   .item-size {
     @apply text-xs text-gray-500 dark:text-gray-400;
   }
-  
+
   .item-status-badge {
     @apply text-xs px-2 py-0.5 rounded-full;
     @apply bg-gray-100 dark:bg-dark-300;
-    
+
     &.status-downloading {
       @apply bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400;
     }
-    
+
     &.status-completed {
       @apply bg-green-50 text-green-600 dark:bg-green-900/20 dark:text-green-400;
     }
-    
+
     &.status-error {
       @apply bg-red-50 text-red-600 dark:bg-red-900/20 dark:text-red-400;
     }
@@ -1189,7 +1275,7 @@ onMounted(() => {
   @apply flex items-center gap-2;
   @apply text-xs font-medium;
   @apply text-gray-700 dark:text-gray-300;
-  
+
   i {
     @apply text-gray-400 dark:text-gray-500;
   }
@@ -1216,92 +1302,92 @@ onMounted(() => {
   @apply shadow-sm;
   @apply flex gap-3;
   @apply transition-all duration-300;
-  
+
   &:hover {
     @apply shadow-md;
     @apply transform -translate-y-0.5;
   }
-  
+
   .item-cover {
     @apply w-14 h-14 rounded-md overflow-hidden;
     @apply flex-shrink-0;
     @apply bg-gray-100 dark:bg-dark-300;
     @apply shadow-sm;
-    
+
     img {
       @apply w-full h-full object-cover;
     }
   }
-  
+
   .item-info {
     @apply flex-1 flex justify-between items-center;
     @apply min-w-0;
   }
-  
+
   .item-primary {
     @apply flex-1 min-w-0 flex items-center justify-between;
   }
-  
+
   .item-name {
     @apply text-sm font-medium truncate;
   }
-  
+
   .item-artist,
   .item-size {
     @apply flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400;
-    
+
     i {
       @apply text-gray-400 dark:text-gray-500;
     }
   }
-  
+
   .item-path {
     @apply flex items-center gap-1 text-xs;
     @apply text-gray-500 dark:text-gray-400;
     @apply bg-gray-50 dark:bg-dark-300;
     @apply rounded-md py-1 px-2;
     @apply truncate;
-    
+
     i {
       @apply text-gray-400 dark:text-gray-500 flex-shrink-0;
     }
-    
+
     span {
       @apply truncate flex-1;
     }
-    
+
     .copy-button {
       @apply ml-1 opacity-0;
       @apply text-gray-400 hover:text-primary;
       @apply transition-all duration-200;
     }
-    
+
     &:hover .copy-button {
       @apply opacity-100;
     }
   }
-  
+
   .item-actions {
     @apply flex gap-1;
     @apply ml-2;
   }
-  
+
   .action-btn {
     @apply flex items-center gap-1;
     @apply px-2 py-1 rounded-md;
     @apply text-xs;
     @apply transition-colors duration-200;
-    
+
     &.play {
       @apply text-primary dark:text-white;
       @apply hover:bg-gray-100 dark:hover:bg-dark-300 hover:text-green-500;
     }
-    
+
     &.open {
       @apply text-gray-600 dark:text-gray-300;
       @apply hover:bg-gray-100 dark:hover:bg-dark-300;
     }
-    
+
     &.delete {
       @apply text-red-500;
       @apply hover:bg-red-500/10;
@@ -1331,7 +1417,7 @@ onMounted(() => {
   @apply border-b border-gray-100 dark:border-gray-800;
   @apply text-gray-900 dark:text-gray-100;
   @apply font-medium;
-  
+
   i {
     @apply text-amber-500 dark:text-amber-400;
   }
@@ -1352,13 +1438,13 @@ onMounted(() => {
   @apply px-3 py-1.5 rounded-md;
   @apply text-sm font-medium;
   @apply transition-colors duration-200;
-  
+
   &.cancel {
     @apply bg-gray-100 dark:bg-dark-300;
     @apply text-gray-700 dark:text-gray-300;
     @apply hover:bg-gray-200 dark:hover:bg-dark-300;
   }
-  
+
   &.confirm {
     @apply bg-amber-500 dark:bg-amber-600;
     @apply text-white;
@@ -1424,7 +1510,4 @@ onMounted(() => {
 .format-preview {
   @apply text-sm;
 }
-</style> 
-
-
-
+</style>

src/renderer/views/favorite/index.vue

@@ -8,19 +8,11 @@
       <div v-if="!isComponent && isElectron" class="favorite-header-right">
         <div class="sort-controls" v-if="!isSelecting">
           <div class="sort-buttons">
-            <div 
-              class="sort-button" 
-              :class="{ active: isDescending }"
-              @click="toggleSort(true)"
-            >
+            <div class="sort-button" :class="{ active: isDescending }" @click="toggleSort(true)">
               <i class="iconfont ri-sort-desc"></i>
               {{ t('favorite.descending') }}
             </div>
-            <div 
-              class="sort-button" 
-              :class="{ active: !isDescending }"
-              @click="toggleSort(false)"
-            >
+            <div class="sort-button" :class="{ active: !isDescending }" @click="toggleSort(false)">
               <i class="iconfont ri-sort-asc"></i>
               {{ t('favorite.ascending') }}
             </div>
@@ -104,450 +96,450 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, onMounted } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
-import { getMusicDetail } from '@/api/music';
 import { getBilibiliProxyUrl, getBilibiliVideoDetail } from '@/api/bilibili';
+import { getMusicDetail } from '@/api/music';
 import SongItem from '@/components/common/SongItem.vue';
 import { useDownload } from '@/hooks/useDownload';
 import { usePlayerStore } from '@/store';
 import type { SongResult } from '@/type/music';
 import { isElectron, setAnimationClass, setAnimationDelay } from '@/utils';
 
-  const { t } = useI18n();
-  const playerStore = usePlayerStore();
-  const favoriteList = computed(() => playerStore.favoriteList);
-  const favoriteSongs = ref<SongResult[]>([]);
-  const loading = ref(false);
-  const noMore = ref(false);
-  const scrollbarRef = ref();
+const { t } = useI18n();
+const playerStore = usePlayerStore();
+const favoriteList = computed(() => playerStore.favoriteList);
+const favoriteSongs = ref<SongResult[]>([]);
+const loading = ref(false);
+const noMore = ref(false);
+const scrollbarRef = ref();
 
-  // 多选相关
+// 多选相关
 const isSelecting = ref(false);
 const selectedSongs = ref<number[]>([]);
 const { isDownloading, batchDownloadMusic } = useDownload();
 
-  // 开始多选
-  const startSelect = () => {
-    isSelecting.value = true;
-    selectedSongs.value = [];
-  };
+// 开始多选
+const startSelect = () => {
+  isSelecting.value = true;
+  selectedSongs.value = [];
+};
 
-  // 取消多选
-  const cancelSelect = () => {
-    isSelecting.value = false;
-    selectedSongs.value = [];
-  };
+// 取消多选
+const cancelSelect = () => {
+  isSelecting.value = false;
+  selectedSongs.value = [];
+};
 
-  // 处理选择
-  const handleSelect = (songId: number, selected: boolean) => {
-    if (selected) {
-      selectedSongs.value.push(songId);
-    } else {
-      selectedSongs.value = selectedSongs.value.filter((id) => id !== songId);
-    }
-  };
+// 处理选择
+const handleSelect = (songId: number, selected: boolean) => {
+  if (selected) {
+    selectedSongs.value.push(songId);
+  } else {
+    selectedSongs.value = selectedSongs.value.filter((id) => id !== songId);
+  }
+};
 
-  // 批量下载
+// 批量下载
 const handleBatchDownload = async () => {
   // 获取选中歌曲的信息
   const selectedSongsList = selectedSongs.value
     .map((songId) => favoriteSongs.value.find((s) => s.id === songId))
     .filter((song) => song) as SongResult[];
-  
+
   // 使用hook中的批量下载功能
   await batchDownloadMusic(selectedSongsList);
-  
+
   // 下载完成后取消选择
   cancelSelect();
 };
 
-  // 排序相关
-  const isDescending = ref(true); // 默认倒序显示
+// 排序相关
+const isDescending = ref(true); // 默认倒序显示
 
-  // 切换排序方式
-  const toggleSort = (descending: boolean) => {
-    if (isDescending.value === descending) return;
-    isDescending.value = descending;
-    currentPage.value = 1;
+// 切换排序方式
+const toggleSort = (descending: boolean) => {
+  if (isDescending.value === descending) return;
+  isDescending.value = descending;
+  currentPage.value = 1;
+  favoriteSongs.value = [];
+  noMore.value = false;
+  getFavoriteSongs();
+};
+
+// 无限滚动相关
+const pageSize = 100;
+const currentPage = ref(1);
+
+const props = defineProps({
+  isComponent: {
+    type: Boolean,
+    default: false
+  }
+});
+
+// 获取当前页的收藏歌曲ID
+const getCurrentPageIds = () => {
+  let ids = [...favoriteList.value]; // 复制一份以免修改原数组
+
+  // 根据排序方式调整顺序
+  if (isDescending.value) {
+    ids = ids.reverse(); // 倒序，最新收藏的在前面
+  }
+
+  const startIndex = (currentPage.value - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+  // 返回原始ID，不进行类型转换
+  return ids.slice(startIndex, endIndex);
+};
+
+// 获取收藏歌曲详情
+const getFavoriteSongs = async () => {
+  if (favoriteList.value.length === 0) {
     favoriteSongs.value = [];
-    noMore.value = false;
-    getFavoriteSongs();
-  };
+    return;
+  }
 
-  // 无限滚动相关
-  const pageSize = 100;
-  const currentPage = ref(1);
+  if (props.isComponent && favoriteSongs.value.length >= 16) {
+    return;
+  }
 
-  const props = defineProps({
-    isComponent: {
-      type: Boolean,
-      default: false
-    }
-  });
+  loading.value = true;
+  try {
+    const currentIds = getCurrentPageIds();
 
-  // 获取当前页的收藏歌曲ID
-  const getCurrentPageIds = () => {
-    let ids = [...favoriteList.value]; // 复制一份以免修改原数组
-    
-    // 根据排序方式调整顺序
-    if (isDescending.value) {
-      ids = ids.reverse(); // 倒序，最新收藏的在前面
-    }
-    
-    const startIndex = (currentPage.value - 1) * pageSize;
-    const endIndex = startIndex + pageSize;
-    // 返回原始ID，不进行类型转换
-    return ids.slice(startIndex, endIndex);
-  };
+    // 分离网易云音乐ID和B站视频ID
+    const musicIds = currentIds.filter((id) => typeof id === 'number') as number[];
+    // B站ID可能是字符串格式（包含"--"）或特定数字ID，如113911642789603
+    const bilibiliIds = currentIds.filter((id) => typeof id === 'string');
 
-  // 获取收藏歌曲详情
-  const getFavoriteSongs = async () => {
-    if (favoriteList.value.length === 0) {
-      favoriteSongs.value = [];
-      return;
-    }
-
-    if (props.isComponent && favoriteSongs.value.length >= 16) {
-      return;
-    }
-
-    loading.value = true;
-    try {
-      const currentIds = getCurrentPageIds();
-      
-      // 分离网易云音乐ID和B站视频ID
-      const musicIds = currentIds.filter((id) => typeof id === 'number') as number[];
-      // B站ID可能是字符串格式（包含"--"）或特定数字ID，如113911642789603
-      const bilibiliIds = currentIds.filter((id) => typeof id === 'string');
-      
-      // 处理网易云音乐数据
-      let neteaseSongs: SongResult[] = [];
-      if (musicIds.length > 0) {
-        const res = await getMusicDetail(musicIds);
-        if (res.data.songs) {
-          neteaseSongs = res.data.songs.map((song: SongResult) => ({
-            ...song,
-            picUrl: song.al?.picUrl || '',
-            source: 'netease'
-          }));
-        }
+    // 处理网易云音乐数据
+    let neteaseSongs: SongResult[] = [];
+    if (musicIds.length > 0) {
+      const res = await getMusicDetail(musicIds);
+      if (res.data.songs) {
+        neteaseSongs = res.data.songs.map((song: SongResult) => ({
+          ...song,
+          picUrl: song.al?.picUrl || '',
+          source: 'netease'
+        }));
       }
-      
-      // 处理B站视频数据
-      const bilibiliSongs: SongResult[] = [];
-      for (const biliId of bilibiliIds) {
-        const strBiliId = String(biliId);
-        console.log(`处理B站ID: ${strBiliId}`);
-        
-        if (strBiliId.includes('--')) {
-          // 从ID中提取B站视频信息 (bvid--pid--cid格式)
-          try {
-            const [bvid, pid, cid] = strBiliId.split('--');
-            if (!bvid || !pid || !cid) {
-              console.warn(`B站ID格式错误: ${strBiliId}, 正确格式应为 bvid--pid--cid`);
-              continue;
-            }
-            
-            const res = await getBilibiliVideoDetail(bvid);
-            const videoDetail = res.data;
-            
-            // 找到对应的分P
-            const page = videoDetail.pages.find(p => p.cid === Number(cid));
-            if (!page) {
-              console.warn(`未找到对应的分P: cid=${cid}`);
-              continue;
-            }
-            
-            const songData = {
-              id: strBiliId,
-              name: `${page.part || ''} - ${videoDetail.title}`,
-              picUrl: getBilibiliProxyUrl(videoDetail.pic),
-              ar: [
-                {
-                  name: videoDetail.owner.name,
-                  id: videoDetail.owner.mid
-                }
-              ],
-              al: {
-                name: videoDetail.title,
-                picUrl: getBilibiliProxyUrl(videoDetail.pic)
-              },
-              source: 'bilibili',
-              bilibiliData: {
-                bvid,
-                cid: Number(cid)
+    }
+
+    // 处理B站视频数据
+    const bilibiliSongs: SongResult[] = [];
+    for (const biliId of bilibiliIds) {
+      const strBiliId = String(biliId);
+      console.log(`处理B站ID: ${strBiliId}`);
+
+      if (strBiliId.includes('--')) {
+        // 从ID中提取B站视频信息 (bvid--pid--cid格式)
+        try {
+          const [bvid, pid, cid] = strBiliId.split('--');
+          if (!bvid || !pid || !cid) {
+            console.warn(`B站ID格式错误: ${strBiliId}, 正确格式应为 bvid--pid--cid`);
+            continue;
+          }
+
+          const res = await getBilibiliVideoDetail(bvid);
+          const videoDetail = res.data;
+
+          // 找到对应的分P
+          const page = videoDetail.pages.find((p) => p.cid === Number(cid));
+          if (!page) {
+            console.warn(`未找到对应的分P: cid=${cid}`);
+            continue;
+          }
+
+          const songData = {
+            id: strBiliId,
+            name: `${page.part || ''} - ${videoDetail.title}`,
+            picUrl: getBilibiliProxyUrl(videoDetail.pic),
+            ar: [
+              {
+                name: videoDetail.owner.name,
+                id: videoDetail.owner.mid
               }
-            } as SongResult;
-            
-            bilibiliSongs.push(songData);
-          } catch (error) {
-            console.error(`获取B站视频详情失败 (${strBiliId}):`, error);
+            ],
+            al: {
+              name: videoDetail.title,
+              picUrl: getBilibiliProxyUrl(videoDetail.pic)
+            },
+            source: 'bilibili',
+            bilibiliData: {
+              bvid,
+              cid: Number(cid)
+            }
+          } as SongResult;
+
+          bilibiliSongs.push(songData);
+        } catch (error) {
+          console.error(`获取B站视频详情失败 (${strBiliId}):`, error);
+        }
+      }
+    }
+
+    console.log('获取数据统计:', {
+      neteaseSongs: neteaseSongs.length,
+      bilibiliSongs: bilibiliSongs.length
+    });
+
+    // 合并数据，保持原有顺序
+    const newSongs = currentIds
+      .map((id) => {
+        const strId = String(id);
+
+        // 查找B站视频
+        if (typeof id === 'string') {
+          const found = bilibiliSongs.find((song) => String(song.id) === strId);
+          if (found) return found;
+        }
+
+        // 查找网易云音乐
+        const found = neteaseSongs.find((song) => String(song.id) === strId);
+        return found;
+      })
+      .filter((song): song is SongResult => !!song);
+
+    console.log(`最终歌曲列表: ${newSongs.length}首`);
+
+    // 追加新数据而不是替换
+    if (currentPage.value === 1) {
+      favoriteSongs.value = newSongs;
+    } else {
+      favoriteSongs.value = [...favoriteSongs.value, ...newSongs];
+    }
+
+    // 判断是否还有更多数据
+    noMore.value = favoriteSongs.value.length >= favoriteList.value.length;
+  } catch (error) {
+    console.error('获取收藏歌曲失败:', error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 处理滚动事件
+const handleScroll = (e: any) => {
+  const { scrollTop, scrollHeight, offsetHeight } = e.target;
+  const threshold = 100; // 距离底部多少像素时加载更多
+
+  if (!loading.value && !noMore.value && scrollHeight - (scrollTop + offsetHeight) < threshold) {
+    currentPage.value++;
+    getFavoriteSongs();
+  }
+};
+
+const hasLoaded = ref(false);
+
+onMounted(async () => {
+  if (!hasLoaded.value) {
+    await playerStore.initializeFavoriteList();
+    await getFavoriteSongs();
+    hasLoaded.value = true;
+  }
+});
+
+// 监听收藏列表变化，变化时重置并重新加载
+watch(
+  favoriteList,
+  async () => {
+    hasLoaded.value = false;
+    currentPage.value = 1;
+    noMore.value = false;
+    await getFavoriteSongs();
+    hasLoaded.value = true;
+  },
+  { deep: true }
+);
+
+const handlePlay = () => {
+  playerStore.setPlayList(favoriteSongs.value);
+};
+
+const getItemAnimationDelay = (index: number) => {
+  return setAnimationDelay(index, 30);
+};
+
+const router = useRouter();
+const handleMore = () => {
+  router.push('/history');
+};
+
+// 全选相关
+const isAllSelected = computed(() => {
+  return (
+    favoriteSongs.value.length > 0 && selectedSongs.value.length === favoriteSongs.value.length
+  );
+});
+
+const isIndeterminate = computed(() => {
+  return selectedSongs.value.length > 0 && selectedSongs.value.length < favoriteSongs.value.length;
+});
+
+// 处理全选/取消全选
+const handleSelectAll = (checked: boolean) => {
+  if (checked) {
+    selectedSongs.value = favoriteSongs.value.map((song) => song.id as number);
+  } else {
+    selectedSongs.value = [];
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.favorite-page {
+  @apply h-full flex flex-col pt-2;
+  @apply bg-light dark:bg-black;
+
+  .favorite-header {
+    @apply flex items-center justify-between flex-shrink-0 px-4 pb-2;
+
+    &-left {
+      @apply flex items-center gap-4;
+
+      h2 {
+        @apply text-xl font-bold;
+        @apply text-gray-900 dark:text-white;
+      }
+
+      .favorite-count {
+        @apply text-gray-500 dark:text-gray-400 text-sm;
+      }
+    }
+
+    &-right {
+      @apply flex items-center gap-3;
+
+      .sort-controls {
+        @apply flex items-center;
+
+        .sort-buttons {
+          @apply flex items-center bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden;
+          @apply border border-gray-200 dark:border-gray-700;
+
+          .sort-button {
+            @apply flex items-center py-1 px-3 text-sm cursor-pointer;
+            @apply text-gray-600 dark:text-gray-400;
+            @apply transition-all duration-300;
+
+            &:first-child {
+              @apply border-r border-gray-200 dark:border-gray-700;
+            }
+
+            .iconfont {
+              @apply mr-1 text-base;
+            }
+
+            &.active {
+              @apply bg-green-500 text-white dark:text-gray-100;
+              @apply font-medium;
+            }
+
+            &:hover:not(.active) {
+              @apply bg-gray-200 dark:bg-gray-700;
+            }
           }
         }
       }
-      
-      console.log('获取数据统计:', {
-        neteaseSongs: neteaseSongs.length,
-        bilibiliSongs: bilibiliSongs.length
-      });
-      
-      // 合并数据，保持原有顺序
-      const newSongs = currentIds
-        .map(id => {
-          const strId = String(id);
-          
-          // 查找B站视频
-          if (typeof id === 'string') {
-            const found = bilibiliSongs.find(song => String(song.id) === strId);
-            if (found) return found;
-          }
-          
-          // 查找网易云音乐
-          const found = neteaseSongs.find(song => String(song.id) === strId);
-          return found;
-        })
-        .filter((song): song is SongResult => !!song);
-      
-      console.log(`最终歌曲列表: ${newSongs.length}首`);
 
-      // 追加新数据而不是替换
-      if (currentPage.value === 1) {
-        favoriteSongs.value = newSongs;
-      } else {
-        favoriteSongs.value = [...favoriteSongs.value, ...newSongs];
+      .select-btn {
+        @apply rounded-full px-4 h-8;
+        @apply transition-all duration-300 ease-in-out;
+        @apply hover:bg-primary hover:text-white;
+        @apply dark:border-gray-600;
+
+        .iconfont {
+          @apply mr-1 text-lg;
+        }
       }
 
-      // 判断是否还有更多数据
-      noMore.value = favoriteSongs.value.length >= favoriteList.value.length;
-    } catch (error) {
-      console.error('获取收藏歌曲失败:', error);
-    } finally {
-      loading.value = false;
+      .select-controls {
+        @apply flex items-center gap-3;
+        @apply bg-gray-50 dark:bg-gray-800;
+        @apply rounded-full px-3 py-1;
+        @apply border border-gray-200 dark:border-gray-700;
+        @apply transition-all duration-300;
+
+        .select-all-checkbox {
+          @apply text-sm text-gray-900 dark:text-gray-200;
+        }
+
+        .operation-btns {
+          @apply flex items-center gap-2 ml-2;
+
+          .download-btn {
+            @apply rounded-full px-4 h-7;
+            @apply bg-primary text-white;
+            @apply hover:bg-primary-dark;
+            @apply disabled:opacity-50 disabled:cursor-not-allowed;
+
+            .iconfont {
+              @apply mr-1 text-lg;
+            }
+          }
+
+          .cancel-btn {
+            @apply rounded-full px-4 h-7;
+            @apply text-gray-600 dark:text-gray-300;
+            @apply hover:bg-gray-100 dark:hover:bg-gray-700;
+            @apply border-gray-300 dark:border-gray-600;
+          }
+        }
+      }
     }
-  };
+  }
 
-  // 处理滚动事件
-  const handleScroll = (e: any) => {
-    const { scrollTop, scrollHeight, offsetHeight } = e.target;
-    const threshold = 100; // 距离底部多少像素时加载更多
+  .favorite-main {
+    @apply flex flex-col flex-grow min-h-0;
 
-    if (!loading.value && !noMore.value && scrollHeight - (scrollTop + offsetHeight) < threshold) {
-      currentPage.value++;
-      getFavoriteSongs();
+    .favorite-content {
+      @apply flex-grow min-h-0;
+
+      .empty-tip {
+        @apply h-full flex items-center justify-center;
+        @apply text-gray-500 dark:text-gray-400;
+      }
+
+      .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;
+
+          .n-button {
+            @apply text-green-500 hover:text-green-600;
+          }
+        }
+      }
     }
-  };
+  }
+}
 
-  const hasLoaded = ref(false);
+.loading-wrapper {
+  @apply flex justify-center items-center py-20;
+}
 
-  onMounted(async () => {
-    if (!hasLoaded.value) {
-      await playerStore.initializeFavoriteList();
-      await getFavoriteSongs();
-      hasLoaded.value = true;
-    }
-  });
+.no-more-tip {
+  @apply text-center py-4 text-sm;
+  @apply text-gray-500 dark:text-gray-400;
+}
 
-  // 监听收藏列表变化，变化时重置并重新加载
-  watch(
-    favoriteList,
-    async () => {
-      hasLoaded.value = false;
-      currentPage.value = 1;
-      noMore.value = false;
-      await getFavoriteSongs();
-      hasLoaded.value = true;
-    },
-    { deep: true }
-  );
-
-  const handlePlay = () => {
-    playerStore.setPlayList(favoriteSongs.value);
-  };
-
-  const getItemAnimationDelay = (index: number) => {
-    return setAnimationDelay(index, 30);
-  };
-
-  const router = useRouter();
-  const handleMore = () => {
-    router.push('/history');
-  };
-
-  // 全选相关
-  const isAllSelected = computed(() => {
-    return (
-      favoriteSongs.value.length > 0 && selectedSongs.value.length === favoriteSongs.value.length
-    );
-  });
-
-  const isIndeterminate = computed(() => {
-    return selectedSongs.value.length > 0 && selectedSongs.value.length < favoriteSongs.value.length;
-  });
-
-  // 处理全选/取消全选
-  const handleSelectAll = (checked: boolean) => {
-    if (checked) {
-      selectedSongs.value = favoriteSongs.value.map((song) => song.id as number);
-    } else {
-      selectedSongs.value = [];
-    }
-  };
-  </script>
-
-  <style lang="scss" scoped>
+.mobile {
   .favorite-page {
-    @apply h-full flex flex-col pt-2;
-    @apply bg-light dark:bg-black;
+    @apply p-4 m-0;
 
     .favorite-header {
-      @apply flex items-center justify-between flex-shrink-0 px-4 pb-2;
+      @apply mb-4;
 
-      &-left {
-        @apply flex items-center gap-4;
-
-        h2 {
-          @apply text-xl font-bold;
-          @apply text-gray-900 dark:text-white;
-        }
-
-        .favorite-count {
-          @apply text-gray-500 dark:text-gray-400 text-sm;
-        }
-      }
-
-      &-right {
-        @apply flex items-center gap-3;
-
-        .sort-controls {
-          @apply flex items-center;
-          
-          .sort-buttons {
-            @apply flex items-center bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden;
-            @apply border border-gray-200 dark:border-gray-700;
-            
-            .sort-button {
-              @apply flex items-center py-1 px-3 text-sm cursor-pointer;
-              @apply text-gray-600 dark:text-gray-400;
-              @apply transition-all duration-300;
-              
-              &:first-child {
-                @apply border-r border-gray-200 dark:border-gray-700;
-              }
-              
-              .iconfont {
-                @apply mr-1 text-base;
-              }
-              
-              &.active {
-                @apply bg-green-500 text-white dark:text-gray-100;
-                @apply font-medium;
-              }
-              
-              &:hover:not(.active) {
-                @apply bg-gray-200 dark:bg-gray-700;
-              }
-            }
-          }
-        }
-
-        .select-btn {
-          @apply rounded-full px-4 h-8;
-          @apply transition-all duration-300 ease-in-out;
-          @apply hover:bg-primary hover:text-white;
-          @apply dark:border-gray-600;
-
-          .iconfont {
-            @apply mr-1 text-lg;
-          }
-        }
-
-        .select-controls {
-          @apply flex items-center gap-3;
-          @apply bg-gray-50 dark:bg-gray-800;
-          @apply rounded-full px-3 py-1;
-          @apply border border-gray-200 dark:border-gray-700;
-          @apply transition-all duration-300;
-
-          .select-all-checkbox {
-            @apply text-sm text-gray-900 dark:text-gray-200;
-          }
-
-          .operation-btns {
-            @apply flex items-center gap-2 ml-2;
-
-            .download-btn {
-              @apply rounded-full px-4 h-7;
-              @apply bg-primary text-white;
-              @apply hover:bg-primary-dark;
-              @apply disabled:opacity-50 disabled:cursor-not-allowed;
-
-              .iconfont {
-                @apply mr-1 text-lg;
-              }
-            }
-
-            .cancel-btn {
-              @apply rounded-full px-4 h-7;
-              @apply text-gray-600 dark:text-gray-300;
-              @apply hover:bg-gray-100 dark:hover:bg-gray-700;
-              @apply border-gray-300 dark:border-gray-600;
-            }
-          }
-        }
-      }
-    }
-
-    .favorite-main {
-      @apply flex flex-col flex-grow min-h-0;
-
-      .favorite-content {
-        @apply flex-grow min-h-0;
-
-        .empty-tip {
-          @apply h-full flex items-center justify-center;
-          @apply text-gray-500 dark:text-gray-400;
-        }
-
-        .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;
-
-            .n-button {
-              @apply text-green-500 hover:text-green-600;
-            }
-          }
-        }
+      h2 {
+        @apply text-xl;
       }
     }
   }
-
-  .loading-wrapper {
-    @apply flex justify-center items-center py-20;
-  }
-
-  .no-more-tip {
-    @apply text-center py-4 text-sm;
-    @apply text-gray-500 dark:text-gray-400;
-  }
-
-  .mobile {
-    .favorite-page {
-      @apply p-4 m-0;
-
-      .favorite-header {
-        @apply mb-4;
-
-        h2 {
-          @apply text-xl;
-        }
-      }
-    }
-  }
-  </style>
+}
+</style>

src/renderer/views/history/index.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { getBilibiliProxyUrl, getBilibiliVideoDetail } from '@/api/bilibili';

src/renderer/views/list/index.vue

@@ -97,11 +97,11 @@ const router = useRouter();
 const openPlaylist = (item: any) => {
   recommendItem.value = item;
   listLoading.value = true;
-  
-  getListDetail(item.id).then(res => {
+
+  getListDetail(item.id).then((res) => {
     listDetail.value = res.data;
     listLoading.value = false;
-    
+
     navigateToMusicList(router, {
       id: item.id,
       type: 'playlist',

src/renderer/views/lyric/index.vue

@@ -37,8 +37,8 @@
           <i v-if="lyricSetting.theme === 'light'" class="ri-sun-line"></i>
           <i v-else class="ri-moon-line"></i>
         </div>
-        <div 
-          class="control-button theme-color-button" 
+        <div
+          class="control-button theme-color-button"
           :class="{ active: showThemeColorPanel }"
           @click="toggleThemeColorPanel"
         >
@@ -58,7 +58,7 @@
     </div>
 
     <!-- 主题色选择面板 -->
-    <ThemeColorPanel
+    <theme-color-panel
       :visible="showThemeColorPanel"
       :current-color="currentHighlightColor"
       :theme="lyricSetting.theme"
@@ -106,8 +106,8 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
-import { SongResult } from '@/type/music';
 import ThemeColorPanel from '@/components/lyric/ThemeColorPanel.vue';
+import { SongResult } from '@/type/music';
 import {
   getCurrentLyricThemeColor,
   loadLyricThemeColor,
@@ -156,18 +156,18 @@ const loadLyricSettings = () => {
     const stored = localStorage.getItem('lyricData');
     if (stored) {
       const parsed = JSON.parse(stored);
-      
+
       // 验证 highlightColor 字段
       let validatedHighlightColor = parsed.highlightColor;
       if (validatedHighlightColor && !validateColor(validatedHighlightColor)) {
         console.warn('Invalid stored highlight color, removing it');
         validatedHighlightColor = undefined;
       }
-      
+
       // 确保所有必需字段存在并有效
       return {
         isTop: parsed.isTop ?? false,
-        theme: (parsed.theme === 'light' || parsed.theme === 'dark') ? parsed.theme : 'dark',
+        theme: parsed.theme === 'light' || parsed.theme === 'dark' ? parsed.theme : 'dark',
         isLock: parsed.isLock ?? false,
         highlightColor: validatedHighlightColor
       };
@@ -175,7 +175,7 @@ const loadLyricSettings = () => {
   } catch (error) {
     console.error('Failed to load lyric settings:', error);
   }
-  
+
   // 返回默认设置
   return {
     isTop: false,
@@ -226,7 +226,7 @@ const handleMouseLeave = () => {
   if (!lyricSetting.value.isLock) return;
   isHovering.value = false;
   windowData.electron.ipcRenderer.send('set-ignore-mouse', false);
-  
+
   // 强制重置背景色
   const lyricWindow = document.querySelector('.lyric-window') as HTMLElement;
   if (lyricWindow) {
@@ -418,7 +418,7 @@ const getLyricStyle = (index: number) => {
   if (index !== currentIndex.value) return {};
 
   const progress = currentProgress.value * 100;
-  
+
   // 使用更清晰的渐变实现
   return {
     background: `linear-gradient(to right, var(--highlight-color) ${progress}%, var(--text-color) ${progress}%)`,
@@ -594,14 +594,14 @@ const handleColorChange = (color: string) => {
     console.error('Invalid color received:', color);
     return;
   }
-  
+
   try {
     currentHighlightColor.value = color;
     updateThemeColorWithTransition(color);
-    
+
     // 更新 lyricSetting 中的 highlightColor
     lyricSetting.value.highlightColor = color;
-    
+
     // 同时保存到专用的主题色存储
     saveLyricThemeColor(color);
   } catch (error) {
@@ -621,12 +621,12 @@ const handleThemeColorPanelClose = () => {
 const resetThemeColor = () => {
   // 重置到默认颜色
   const defaultColor = getCurrentLyricThemeColor(lyricSetting.value.theme);
-  
+
   // 更新所有相关状态
   currentHighlightColor.value = defaultColor;
   lyricSetting.value.highlightColor = undefined;
   updateThemeColorWithTransition(defaultColor);
-  
+
   // 清除专用存储
   try {
     const settings = loadLyricSettings();
@@ -648,7 +648,7 @@ const validateAndFixColorSettings = () => {
       lyricSetting.value.highlightColor = undefined;
       updateCSSVariable('--lyric-highlight-color', defaultColor);
     }
-    
+
     // 检查 lyricSetting 中的颜色是否有效
     if (lyricSetting.value.highlightColor && !validateColor(lyricSetting.value.highlightColor)) {
       console.warn('Stored highlight color is invalid, removing it');
@@ -680,10 +680,10 @@ const updateThemeColorWithTransition = (newColor: string) => {
   if (lyricWindow) {
     lyricWindow.classList.add('color-transitioning');
   }
-  
+
   // 更新CSS变量
   updateCSSVariable('--lyric-highlight-color', newColor);
-  
+
   // 移除过渡类
   setTimeout(() => {
     if (lyricWindow) {
@@ -695,7 +695,7 @@ const updateThemeColorWithTransition = (newColor: string) => {
 const initializeThemeColor = () => {
   // 优先从 lyricSetting 中读取颜色
   let savedColor = lyricSetting.value.highlightColor;
-  
+
   // 如果 lyricSetting 中没有，则从专用存储中读取
   if (!savedColor) {
     savedColor = loadLyricThemeColor();
@@ -704,7 +704,7 @@ const initializeThemeColor = () => {
       lyricSetting.value.highlightColor = savedColor;
     }
   }
-  
+
   if (savedColor) {
     const optimizedColor = getCurrentLyricThemeColor(lyricSetting.value.theme);
     currentHighlightColor.value = optimizedColor;
@@ -844,10 +844,10 @@ onMounted(() => {
       }
     };
   }
-  
+
   // 初始化主题色
   initializeThemeColor();
-  
+
   // 验证和修复颜色设置
   validateAndFixColorSettings();
 });
@@ -887,12 +887,12 @@ body,
   transition: background-color 0.3s ease;
   cursor: default;
   border-radius: 14px;
-  
+
   &.color-transitioning {
     .lyric-text-inner {
       transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
     }
-    
+
     .control-button {
       i {
         transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
@@ -1011,11 +1011,11 @@ body,
       color: var(--highlight-color);
     }
   }
-  
+
   &.theme-color-button {
     &.active {
       background: var(--control-bg);
-      
+
       i {
         color: var(--highlight-color);
       }
@@ -1062,12 +1062,12 @@ body,
   &.lyric-line-current {
     transform: scale(1.05);
     opacity: 1;
-    
+
     // 当前播放歌词的特殊样式
     .lyric-text {
       // 移除阴影，避免干扰渐变效果
       text-shadow: none;
-      
+
       .lyric-text-inner {
         // 为渐变文字添加轻微的外发光
         filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
@@ -1094,13 +1094,13 @@ body,
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  
+
   // 为非当前播放的歌词添加阴影效果
-  text-shadow: 
+  text-shadow:
     0 0 2px rgba(0, 0, 0, 0.8),
     0 1px 1px rgba(0, 0, 0, 0.6),
     0 0 4px rgba(255, 255, 255, 0.2);
-  
+
   .lyric-text-inner {
     transition: background 0.3s ease;
   }
@@ -1112,9 +1112,9 @@ body,
   word-break: break-all;
   transition: font-size 0.2s ease;
   line-height: 1.4;
-  
+
   // 为翻译文本也添加阴影效果，但稍微轻一些
-  text-shadow: 
+  text-shadow:
     0 0 2px rgba(0, 0, 0, 0.7),
     0 1px 1px rgba(0, 0, 0, 0.5),
     0 0 4px rgba(255, 255, 255, 0.2),
@@ -1127,9 +1127,9 @@ body,
   color: var(--text-secondary);
   font-size: 16px;
   padding: 20px;
-  
+
   // 为空歌词提示也添加阴影效果
-  text-shadow: 
+  text-shadow:
     0 0 2px rgba(0, 0, 0, 0.7),
     0 1px 1px rgba(0, 0, 0, 0.5),
     0 0 4px rgba(255, 255, 255, 0.2);

src/renderer/views/music/MusicListPage.vue

@@ -21,7 +21,11 @@
 
         <n-tooltip v-if="canCollect" placement="bottom" trigger="hover">
           <template #trigger>
-            <div class="action-button" :class="isCollected ? 'collected' : 'hover-green'" @click="toggleCollect">
+            <div
+              class="action-button"
+              :class="isCollected ? 'collected' : 'hover-green'"
+              @click="toggleCollect"
+            >
               <i class="icon iconfont" :class="isCollected ? 'ri-heart-fill' : 'ri-heart-line'"></i>
             </div>
           </template>
@@ -45,7 +49,7 @@
                 <i class="icon iconfont ri-checkbox-multiple-line"></i>
               </div>
             </template>
-            {{ t('favorite.batchDownload')}}
+            {{ t('favorite.batchDownload') }}
           </n-tooltip>
           <div v-else class="flex items-center gap-2">
             <n-checkbox
@@ -59,10 +63,15 @@
               <template #trigger>
                 <div
                   class="action-button hover-green"
-                  :class="{ 'opacity-50 pointer-events-none': selectedSongs.length === 0 || isDownloading }"
+                  :class="{
+                    'opacity-50 pointer-events-none': selectedSongs.length === 0 || isDownloading
+                  }"
                   @click="selectedSongs.length && !isDownloading && handleBatchDownload()"
                 >
-                  <i class="icon iconfont ri-download-line" :class="{ 'animate-spin': isDownloading }"></i>
+                  <i
+                    class="icon iconfont ri-download-line"
+                    :class="{ 'animate-spin': isDownloading }"
+                  ></i>
                 </div>
               </template>
               {{ t('favorite.download', { count: selectedSongs.length }) }}
@@ -83,10 +92,17 @@
           <n-tooltip placement="bottom" trigger="hover">
             <template #trigger>
               <div class="toggle-button hover-green" @click="toggleLayout">
-                <i class="icon iconfont" :class="isCompactLayout ? 'ri-list-check-2' : 'ri-grid-line'"></i>
+                <i
+                  class="icon iconfont"
+                  :class="isCompactLayout ? 'ri-list-check-2' : 'ri-grid-line'"
+                ></i>
               </div>
             </template>
-            {{ isCompactLayout ? t('comp.musicList.switchToNormal') : t('comp.musicList.switchToCompact') }}
+            {{
+              isCompactLayout
+                ? t('comp.musicList.switchToNormal')
+                : t('comp.musicList.switchToCompact')
+            }}
           </n-tooltip>
         </div>
 
@@ -104,7 +120,10 @@
                 <i class="icon iconfont ri-search-line text-sm"></i>
               </template>
               <template #suffix>
-                <i class="icon iconfont ri-close-line text-sm cursor-pointer" @click="closeSearch"></i>
+                <i
+                  class="icon iconfont ri-close-line text-sm cursor-pointer"
+                  @click="closeSearch"
+                ></i>
               </template>
             </n-input>
           </template>
@@ -160,7 +179,7 @@
               <n-virtual-list
                 ref="songListRef"
                 class="song-virtual-list"
-                style="max-height: calc(100vh - 130px);"
+                style="max-height: calc(100vh - 130px)"
                 :items="filteredSongs"
                 :item-size="isCompactLayout ? 50 : 70"
                 item-resizable
@@ -170,7 +189,7 @@
                 <template #default="{ item, index }">
                   <div>
                     <div class="double-item">
-                      <song-item  
+                      <song-item
                         :index="index"
                         :compact="isCompactLayout"
                         :item="formatSong(item)"
@@ -201,20 +220,20 @@ defineOptions({
   name: 'MusicList'
 });
 
+import { useMessage } from 'naive-ui';
 import PinyinMatch from 'pinyin-match';
-import { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { updatePlaylistTracks, subscribePlaylist } from '@/api/music';
-import { useMessage } from 'naive-ui';
 
+import { subscribePlaylist, updatePlaylistTracks } from '@/api/music';
 import { getMusicDetail, getMusicListByType } from '@/api/music';
-import SongItem from '@/components/common/SongItem.vue';
 import PlayBottom from '@/components/common/PlayBottom.vue';
+import SongItem from '@/components/common/SongItem.vue';
+import { useDownload } from '@/hooks/useDownload';
 import { useMusicStore, usePlayerStore } from '@/store';
 import { SongResult } from '@/type/music';
 import { getImgUrl, isElectron, isMobile, setAnimationClass } from '@/utils';
-import { useDownload } from '@/hooks/useDownload';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -245,7 +264,9 @@ const isFullPlaylistLoaded = ref(false); // 标记完整播放列表是否已加
 
 // 添加搜索相关的状态和方法
 const isSearchVisible = ref(false);
-const isCompactLayout = ref(isMobile.value ? false : localStorage.getItem('musicListLayout') === 'compact'); // 默认使用紧凑布局
+const isCompactLayout = ref(
+  isMobile.value ? false : localStorage.getItem('musicListLayout') === 'compact'
+); // 默认使用紧凑布局
 
 const showSearch = () => {
   isSearchVisible.value = true;
@@ -288,7 +309,7 @@ onMounted(() => {
 
 // 从 pinia 或路由参数获取数据
 
-  // 从路由参数获取
+// 从路由参数获取
 const routeId = route.params.id as string;
 const routeType = route.query.type as string;
 
@@ -299,14 +320,12 @@ const initData = () => {
     songList.value = musicStore.currentMusicList || [];
     listInfo.value = musicStore.currentListInfo || null;
     canRemove.value = musicStore.canRemoveSong || false;
-    
+
     // 初始化歌曲列表
     initSongList(songList.value);
     return;
   }
-  
 
-  
   if (routeId) {
     // 这里根据 type 和 id 加载数据
     // 例如: 获取歌单、专辑等
@@ -321,7 +340,7 @@ const initData = () => {
 const loadDataByType = async (type: string, id: string) => {
   try {
     const result = await getMusicListByType(type, id);
-    
+
     if (type === 'album') {
       const { songs, album } = result.data;
       name.value = album.name;
@@ -342,13 +361,13 @@ const loadDataByType = async (type: string, id: string) => {
       const { playlist } = result.data;
       name.value = playlist.name;
       listInfo.value = playlist;
-      
+
       // 初始化歌曲列表
       if (playlist.tracks) {
         songList.value = playlist.tracks;
       }
     }
-    
+
     // 初始化歌曲列表
     initSongList(songList.value);
   } catch (error) {
@@ -376,12 +395,12 @@ const getCoverImgUrl = computed(() => {
 });
 
 const getDisplaySongs = computed(() => {
-  if(routeType === 'dailyRecommend') {
+  if (routeType === 'dailyRecommend') {
     return displayedSongs.value.filter((song) => !playerStore.dislikeList.includes(song.id));
-  }else {
+  } else {
     return displayedSongs.value;
   }
-})
+});
 
 // 过滤歌曲列表
 const filteredSongs = computed(() => {
@@ -663,17 +682,17 @@ const handleRemoveSong = async (songId: number) => {
 
     if (res.status === 200) {
       message.success(t('user.message.deleteSuccess'));
-      
+
       // 从显示列表和完整播放列表中移除歌曲
-      displayedSongs.value = displayedSongs.value.filter(song => song.id !== songId);
-      completePlaylist.value = completePlaylist.value.filter(song => song.id !== songId);
-      
+      displayedSongs.value = displayedSongs.value.filter((song) => song.id !== songId);
+      completePlaylist.value = completePlaylist.value.filter((song) => song.id !== songId);
+
       // 如果正在播放该列表，也需要更新播放列表
       const currentPlaylist = playerStore.playList;
       if (currentPlaylist.length > 0 && currentPlaylist[0].id === displayedSongs.value[0]?.id) {
         playerStore.setPlayList(displayedSongs.value.map(formatSong));
       }
-      
+
       // 从Pinia状态中也移除
       if (musicStore.currentMusicList) {
         musicStore.removeSongFromList(songId);
@@ -810,7 +829,7 @@ const checkCollectionStatus = () => {
 // 切换收藏状态
 const toggleCollect = async () => {
   if (!listInfo.value?.id) return;
-  
+
   try {
     loadingList.value = true;
     const tVal = isCollected.value ? 2 : 1; // 1:收藏, 2:取消收藏
@@ -818,13 +837,13 @@ const toggleCollect = async () => {
       t: tVal,
       id: listInfo.value.id
     });
-    
+
     // 假设API返回格式是 { data: { code: number, msg?: string } }
     const res = response.data;
-    
+
     if (res.code === 200) {
       isCollected.value = !isCollected.value;
-      const msgKey = isCollected.value 
+      const msgKey = isCollected.value
         ? 'comp.musicList.collectSuccess'
         : 'comp.musicList.cancelCollectSuccess';
       message.success(t(msgKey));
@@ -844,14 +863,14 @@ const toggleCollect = async () => {
 // 播放全部
 const handlePlayAll = () => {
   if (displayedSongs.value.length === 0) return;
-  
+
   // 如果有搜索关键词，只播放过滤后的歌曲
   if (searchKeyword.value) {
     playerStore.setPlayList(filteredSongs.value.map(formatSong));
     playerStore.setPlay(formatSong(filteredSongs.value[0]));
     return;
   }
-  
+
   // 否则播放全部歌曲
   // 使用setPlayList设置播放列表
   playerStore.setPlayList(displayedSongs.value.map(formatSong));
@@ -862,29 +881,25 @@ const handlePlayAll = () => {
 // 添加到播放列表末尾
 const addToPlaylist = () => {
   if (displayedSongs.value.length === 0) return;
-  
+
   // 获取当前播放列表
   const currentList = playerStore.playList;
-  
+
   // 如果有搜索关键词，只添加过滤后的歌曲
-  const songsToAdd = searchKeyword.value 
-    ? filteredSongs.value 
-    : displayedSongs.value;
-  
+  const songsToAdd = searchKeyword.value ? filteredSongs.value : displayedSongs.value;
+
   // 添加歌曲到播放列表(避免重复添加)
-  const newSongs = songsToAdd.filter(song => 
-    !currentList.some(item => item.id === song.id)
-  );
-  
+  const newSongs = songsToAdd.filter((song) => !currentList.some((item) => item.id === song.id));
+
   if (newSongs.length === 0) {
     message.info(t('comp.musicList.songsAlreadyInPlaylist'));
     return;
   }
-  
+
   // 合并到当前播放列表末尾
   const newList = [...currentList, ...newSongs.map(formatSong)];
   playerStore.setPlayList(newList);
-  
+
   message.success(t('comp.musicList.addToPlaylistSuccess', { count: newSongs.length }));
 };
 
@@ -910,15 +925,11 @@ const handleSelect = (songId: number, selected: boolean) => {
 };
 const isAllSelected = computed(() => {
   return (
-    filteredSongs.value.length > 0 &&
-    selectedSongs.value.length === filteredSongs.value.length
+    filteredSongs.value.length > 0 && selectedSongs.value.length === filteredSongs.value.length
   );
 });
 const isIndeterminate = computed(() => {
-  return (
-    selectedSongs.value.length > 0 &&
-    selectedSongs.value.length < filteredSongs.value.length
-  );
+  return selectedSongs.value.length > 0 && selectedSongs.value.length < filteredSongs.value.length;
 });
 const handleSelectAll = (checked: boolean) => {
   if (checked) {
@@ -1004,7 +1015,7 @@ const handleBatchDownload = async () => {
 
   .search-button {
     @apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors text-gray-500 dark:text-gray-400 hover:text-green-500;
-    
+
     .icon {
       @apply text-lg;
     }
@@ -1013,7 +1024,6 @@ const handleBatchDownload = async () => {
   :deep(.n-input) {
     @apply bg-light-200 dark:bg-dark-200;
   }
-
 }
 
 .no-result {
@@ -1079,7 +1089,7 @@ const handleBatchDownload = async () => {
 .layout-toggle {
   .toggle-button {
     @apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors;
-    
+
     .icon {
       @apply text-lg text-gray-500 dark:text-gray-400 transition-colors;
     }
@@ -1089,7 +1099,7 @@ const handleBatchDownload = async () => {
 .layout-toggle .toggle-button,
 .action-button {
   @apply w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-light-300 dark:hover:bg-dark-300 transition-colors text-gray-500 dark:text-gray-400;
-  
+
   .icon {
     @apply text-lg;
   }
@@ -1099,11 +1109,11 @@ const handleBatchDownload = async () => {
       @apply text-red-500;
     }
   }
-  
+
   &.hover-green:hover {
     .icon {
       @apply text-green-500;
     }
   }
 }
-</style> 
+</style>

src/renderer/views/playlist/ImportPlaylist.vue

@@ -213,10 +213,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { useMessage } from 'naive-ui';
-import { importPlaylist, getImportTaskStatus } from '@/api/playlist';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { getImportTaskStatus, importPlaylist } from '@/api/playlist';
 import { setAnimationClass } from '@/utils';
 
 const { t } = useI18n();
@@ -240,7 +241,7 @@ const removeLinkRow = (index: number) => {
 
 // 验证链接是否有效
 const isLinkInputValid = computed(() => {
-  return linkInputs.value.some(item => item.value.trim() !== '');
+  return linkInputs.value.some((item) => item.value.trim() !== '');
 });
 
 // 元数据相关函数
@@ -254,7 +255,7 @@ const removeMetadataRow = (index: number) => {
 
 // 验证元数据是否有效
 const isLocalMetadataValid = computed(() => {
-  return localMetadata.value.some(item => item.name.trim() !== '');
+  return localMetadata.value.some((item) => item.name.trim() !== '');
 });
 
 // 导入状态
@@ -275,26 +276,26 @@ const handleImportByLink = async () => {
 
   try {
     importing.value = true;
-    
+
     // 处理链接格式
     const links = linkInputs.value
-      .filter(link => link.value.trim())
-      .map(link => link.value.trim());
-    
+      .filter((link) => link.value.trim())
+      .map((link) => link.value.trim());
+
     const encodedLinks = JSON.stringify(links);
-    
+
     const params: any = {
       link: encodedLinks
     };
-    
+
     if (importToStarPlaylist.value) {
       params.importStarPlaylist = true;
     } else if (playlistName.value) {
       params.playlistName = playlistName.value;
     }
-    
+
     const res = await importPlaylist(params);
-    
+
     if (res.data.code === 200) {
       message.success(t('comp.playlist.import.importSuccess'));
       taskId.value = res.data.data.taskId;
@@ -319,21 +320,21 @@ const handleImportByText = async () => {
 
   try {
     importing.value = true;
-    
+
     const encodedText = encodeURIComponent(textInput.value);
-    
+
     const params: any = {
       text: encodedText
     };
-    
+
     if (importToStarPlaylist.value) {
       params.importStarPlaylist = true;
     } else if (playlistName.value) {
       params.playlistName = playlistName.value;
     }
-    
+
     const res = await importPlaylist(params);
-    
+
     if (res.data.code === 200) {
       message.success(t('comp.playlist.import.importSuccess'));
       taskId.value = res.data.data.taskId;
@@ -358,24 +359,24 @@ const handleImportByLocal = async () => {
 
   try {
     importing.value = true;
-    
+
     // 过滤掉空的行
-    const filteredData = localMetadata.value.filter(item => item.name.trim() !== '');
-    
+    const filteredData = localMetadata.value.filter((item) => item.name.trim() !== '');
+
     const encodedLocal = JSON.stringify(filteredData);
-    
+
     const params: any = {
       local: encodedLocal
     };
-    
+
     if (importToStarPlaylist.value) {
       params.importStarPlaylist = true;
     } else if (playlistName.value) {
       params.playlistName = playlistName.value;
     }
-    
+
     const res = await importPlaylist(params);
-    
+
     if (res.data.code === 200) {
       message.success(t('comp.playlist.import.importSuccess'));
       taskId.value = res.data.data.taskId;
@@ -397,10 +398,10 @@ const startStatusCheck = () => {
   if (statusCheckInterval.value) {
     clearInterval(statusCheckInterval.value);
   }
-  
+
   // 立即检查一次
   checkTaskStatus();
-  
+
   // 设置定时检查
   statusCheckInterval.value = window.setInterval(() => {
     checkTaskStatus();
@@ -410,25 +411,25 @@ const startStatusCheck = () => {
 // 检查任务状态
 const checkTaskStatus = async () => {
   if (!taskId.value) return;
-  
+
   try {
     checkingStatus.value = true;
     const res = await getImportTaskStatus(taskId.value);
-    
+
     if (res.data.code === 200) {
       // 新的API返回格式处理
       if (res.data.data.tasks && res.data.data.tasks.length > 0) {
         const taskData = res.data.data.tasks[0];
         // 将API返回的status映射到组件内部使用的taskStatus
         const statusMap: Record<string, string> = {
-          'PENDING': 'pending',
-          'PROCESSING': 'processing',
-          'COMPLETE': 'success',
-          'FAILED': 'failed'
+          PENDING: 'pending',
+          PROCESSING: 'processing',
+          COMPLETE: 'success',
+          FAILED: 'failed'
         };
-        
+
         taskStatus.value = statusMap[taskData.status] || 'pending';
-        
+
         if (taskStatus.value === 'success') {
           successCount.value = taskData.succCount || 0;
           // 成功后停止检查
@@ -497,12 +498,12 @@ onUnmounted(() => {
 
 .import-header {
   @apply flex justify-between items-center mb-6;
-  
+
   .import-header-left {
     h2 {
       @apply text-2xl font-bold text-gray-900 dark:text-white mb-2;
     }
-    
+
     .import-desc {
       @apply text-sm text-gray-500 dark:text-gray-400;
     }
@@ -515,62 +516,65 @@ onUnmounted(() => {
 
 .import-card {
   @apply rounded-lg;
-  
+
   .tab-content {
     @apply mt-4 space-y-4;
   }
-  
-  .link-tips, .text-tips, .local-tips {
+
+  .link-tips,
+  .text-tips,
+  .local-tips {
     @apply text-sm text-gray-500 dark:text-gray-400;
-    
+
     ul {
       @apply list-disc pl-5 mt-2;
     }
   }
-  
-  .text-format, .local-format {
+
+  .text-format,
+  .local-format {
     @apply mt-2 font-medium;
   }
-  
+
   .code-example {
     @apply mt-2 p-3 bg-gray-100 dark:bg-gray-800 rounded text-sm overflow-auto;
   }
-  
+
   .link-inputs {
     @apply space-y-3;
-    
+
     .link-row {
       @apply flex items-center space-x-2;
-      
+
       .link-input {
         @apply flex-1;
       }
     }
-    
+
     .link-actions {
       @apply mt-3 flex justify-end;
     }
   }
-  
+
   .metadata-inputs {
     @apply space-y-3;
-    
+
     .metadata-row {
       @apply flex items-center space-x-2;
-      
+
       .metadata-input {
         @apply flex-1;
       }
     }
-    
+
     .metadata-actions {
       @apply mt-3 flex justify-end;
     }
   }
-  
+
   .action-buttons {
     @apply flex items-center space-x-4 mt-6;
-    
+
     .playlist-name-input {
       @apply max-w-xs;
     }
@@ -579,49 +583,50 @@ onUnmounted(() => {
 
 .import-status-card {
   @apply rounded-lg;
-  
+
   .status-header {
     @apply flex justify-between items-center mb-4;
-    
+
     h3 {
       @apply text-lg font-medium text-gray-900 dark:text-white;
     }
   }
-  
+
   .status-content {
     @apply space-y-3;
   }
-  
+
   .status-item {
     @apply flex items-center;
-    
+
     .status-label {
       @apply text-gray-500 dark:text-gray-400 w-24;
     }
-    
+
     .status-value {
       @apply font-medium;
     }
-    
-    .status-pending, .status-processing {
+
+    .status-pending,
+    .status-processing {
       @apply text-blue-500;
     }
-    
+
     .status-success {
       @apply text-green-500;
     }
-    
+
     .status-failed {
       @apply text-red-500;
     }
-    
+
     .success-count {
       @apply text-green-500;
     }
-    
+
     .fail-reason {
       @apply text-red-500;
     }
   }
 }
-</style>
+</style>

src/renderer/views/search/index.vue

@@ -431,10 +431,10 @@ const handlePlayBilibili = (item: IBilibiliSearchResult) => {
 
 const handlePlayAll = () => {
   if (!searchDetail.value?.songs?.length) return;
-  
+
   // 设置播放列表为搜索结果中的所有歌曲
   playerStore.setPlayList(searchDetail.value.songs);
-  
+
   // 开始播放第一首歌
   if (searchDetail.value.songs[0]) {
     playerStore.setPlay(searchDetail.value.songs[0]);
@@ -493,7 +493,7 @@ const handlePlayAll = () => {
 .title {
   @apply text-xl font-bold my-2 mx-4 flex items-center;
   @apply text-gray-900 dark:text-white;
-  
+
   &-play-all {
     @apply ml-auto;
   }
@@ -502,7 +502,7 @@ const handlePlayAll = () => {
 .play-all-btn {
   @apply flex items-center gap-1 px-3 py-1 rounded-full cursor-pointer transition-all;
   @apply text-sm font-normal text-gray-900 dark:text-white hover:bg-light-300 dark:hover:bg-dark-300 hover:text-green-500;
-  
+
   i {
     @apply text-xl;
   }

src/renderer/views/set/index.vue

@@ -32,11 +32,15 @@
                     <template #unchecked><i class="ri-settings-line"></i></template>
                   </n-switch>
                   <span class="text-sm text-gray-500">
-                    {{ setData.autoTheme ? t('settings.basic.autoTheme') : t('settings.basic.manualTheme') }}
+                    {{
+                      setData.autoTheme
+                        ? t('settings.basic.autoTheme')
+                        : t('settings.basic.manualTheme')
+                    }}
                   </span>
                 </div>
-                <n-switch 
-                  v-model:value="isDarkTheme" 
+                <n-switch
+                  v-model:value="isDarkTheme"
                   :disabled="setData.autoTheme"
                   :class="{ 'opacity-50': setData.autoTheme }"
                 >
@@ -118,19 +122,22 @@
                 </div>
               </div>
               <div class="flex items-center gap-2">
-                <span class="text-sm text-gray-400" v-if="!isMobile">{{ setData.animationSpeed }}x</span>
+                <span class="text-sm text-gray-400" v-if="!isMobile"
+                  >{{ setData.animationSpeed }}x</span
+                >
                 <div class="w-40 flex justify-end">
-                  <template v-if="!isMobile"><n-slider
-                    v-model:value="setData.animationSpeed"
-                    :min="0.1"
-                    :max="3"
-                    :step="0.1"
-                    :marks="{
-                      0.1: t('settings.basic.animationSpeed.slow'),
-                      1: t('settings.basic.animationSpeed.normal'),
-                      3: t('settings.basic.animationSpeed.fast')
-                    }"
-                    :disabled="setData.noAnimate"
+                  <template v-if="!isMobile"
+                    ><n-slider
+                      v-model:value="setData.animationSpeed"
+                      :min="0.1"
+                      :max="3"
+                      :step="0.1"
+                      :marks="{
+                        0.1: t('settings.basic.animationSpeed.slow'),
+                        1: t('settings.basic.animationSpeed.normal'),
+                        3: t('settings.basic.animationSpeed.fast')
+                      }"
+                      :disabled="setData.noAnimate"
                   /></template>
                   <template v-else>
                     <n-input-number
@@ -179,13 +186,28 @@
                 />
               </div>
               <!-- 网易云 QQ 音乐 酷我 酷狗 会员购买链接 -->
-            <div class="p-2 bg-light-100 dark:bg-dark-100 rounded-lg mt-2">
-              <div>大家还是需要支持正版，本软件只做开源探讨</div>
+              <div class="p-2 bg-light-100 dark:bg-dark-100 rounded-lg mt-2">
+                <div>大家还是需要支持正版，本软件只做开源探讨</div>
                 <div class="mt-2">各大音乐会员购买链接</div>
                 <div class="flex gap-5 flex-wrap">
-                  <a class="text-green-400 hover:text-green-500" href="https://music.163.com/store/vip" target="_blank">网易云音乐会员</a>
-                  <a class="text-green-400 hover:text-green-500" href="https://y.qq.com/portal/vipportal/" target="_blank">QQ音乐会员</a>
-                  <a class="text-green-400 hover:text-green-500" href="https://vip.kugou.com/" target="_blank">酷狗音乐会员</a>
+                  <a
+                    class="text-green-400 hover:text-green-500"
+                    href="https://music.163.com/store/vip"
+                    target="_blank"
+                    >网易云音乐会员</a
+                  >
+                  <a
+                    class="text-green-400 hover:text-green-500"
+                    href="https://y.qq.com/portal/vipportal/"
+                    target="_blank"
+                    >QQ音乐会员</a
+                  >
+                  <a
+                    class="text-green-400 hover:text-green-500"
+                    href="https://vip.kugou.com/"
+                    target="_blank"
+                    >酷狗音乐会员</a
+                  >
                 </div>
               </div>
             </div>
@@ -202,7 +224,9 @@
                   </div>
                   <div v-if="setData.enableMusicUnblock" class="mt-2">
                     <div class="text-sm">
-                      <span class="text-gray-500">{{ t('settings.playback.selectedMusicSources') }}</span>
+                      <span class="text-gray-500">{{
+                        t('settings.playback.selectedMusicSources')
+                      }}</span>
                       <span v-if="musicSources.length > 0" class="text-gray-400">
                         {{ musicSources.join(', ') }}
                       </span>
@@ -213,8 +237,8 @@
                   </div>
                 </div>
               </div>
-              <n-button 
-                size="small" 
+              <n-button
+                size="small"
                 :disabled="!setData.enableMusicUnblock"
                 @click="showMusicSourcesModal = true"
               >
@@ -225,7 +249,9 @@
             <div class="set-item" v-if="platform === 'darwin'">
               <div>
                 <div class="set-item-title">{{ t('settings.playback.showStatusBar') }}</div>
-                <div class="set-item-content">{{ t('settings.playback.showStatusBarContent') }}</div>
+                <div class="set-item-content">
+                  {{ t('settings.playback.showStatusBarContent') }}
+                </div>
               </div>
               <n-switch v-model:value="setData.showTopAction">
                 <template #checked>{{ t('common.on') }}</template>
@@ -325,7 +351,9 @@
             <div class="set-item">
               <div>
                 <div class="set-item-title">{{ t('settings.application.remoteControl') }}</div>
-                <div class="set-item-content">{{ t('settings.application.remoteControlDesc') }}</div>
+                <div class="set-item-content">
+                  {{ t('settings.application.remoteControlDesc') }}
+                </div>
               </div>
               <n-button size="small" @click="showRemoteControlModal = true">{{
                 t('common.configure')
@@ -483,30 +511,21 @@
       <shortcut-settings v-model:show="showShortcutModal" @change="handleShortcutsChange" />
 
       <!-- 代理设置弹窗 -->
-      <proxy-settings 
-        v-model:show="showProxyModal" 
+      <proxy-settings
+        v-model:show="showProxyModal"
         :config="proxyForm"
         @confirm="handleProxyConfirm"
       />
 
       <!-- 音源设置弹窗 -->
-      <music-source-settings
-        v-model:show="showMusicSourcesModal"
-        v-model:sources="musicSources"
-      />
+      <music-source-settings v-model:show="showMusicSourcesModal" v-model:sources="musicSources" />
 
       <!-- 远程控制设置弹窗 -->
       <remote-control-setting v-model:visible="showRemoteControlModal" />
-
     </template>
 
     <!-- 清除缓存弹窗 -->
-    <clear-cache-settings
-      v-model:show="showClearCacheModal"
-      @confirm="clearCache"
-    />
-
-
+    <clear-cache-settings v-model:show="showClearCacheModal" @confirm="clearCache" />
   </div>
 </template>
 
@@ -521,17 +540,17 @@ import Coffee from '@/components/Coffee.vue';
 import DonationList from '@/components/common/DonationList.vue';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
-import ShortcutSettings from '@/components/settings/ShortcutSettings.vue';
-import ProxySettings from '@/components/settings/ProxySettings.vue';
 import ClearCacheSettings from '@/components/settings/ClearCacheSettings.vue';
 import MusicSourceSettings from '@/components/settings/MusicSourceSettings.vue';
+import ProxySettings from '@/components/settings/ProxySettings.vue';
 import RemoteControlSetting from '@/components/settings/ServerSetting.vue';
+import ShortcutSettings from '@/components/settings/ShortcutSettings.vue';
 import { useSettingsStore } from '@/store/modules/settings';
 import { useUserStore } from '@/store/modules/user';
+import { type Platform } from '@/types/music';
 import { isElectron, isMobile } from '@/utils';
 import { openDirectory, selectDirectory } from '@/utils/fileOperation';
 import { checkUpdate, UpdateResult } from '@/utils/update';
-import { type Platform } from '@/types/music';
 
 import config from '../../../../package.json';
 

src/renderer/views/toplist/index.vue

@@ -40,7 +40,7 @@
 <script lang="ts" setup>
 import { useRouter } from 'vue-router';
 
-import { getToplist, getListDetail } from '@/api/list';
+import { getListDetail, getToplist } from '@/api/list';
 import { navigateToMusicList } from '@/components/common/MusicListNavigator';
 import type { IListDetail } from '@/type/listDetail';
 import { formatNumber, getImgUrl, setAnimationClass, setAnimationDelay } from '@/utils';
@@ -63,11 +63,11 @@ const router = useRouter();
 
 const openToplist = (item: any) => {
   listLoading.value = true;
-  
-  getListDetail(item.id).then(res => {
+
+  getListDetail(item.id).then((res) => {
     listDetail.value = res.data;
     listLoading.value = false;
-    
+
     navigateToMusicList(router, {
       id: item.id,
       type: 'playlist',
@@ -175,4 +175,4 @@ onMounted(() => {
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   }
 }
-</style> 
+</style>

src/renderer/views/user/detail.vue

@@ -103,7 +103,13 @@
                   :class="setAnimationClass('animate__bounceInUp')"
                   :style="setAnimationDelay(index, 25)"
                 >
-                  <song-item class="song-item" :index="index" :item="item" compact @play="handlePlay" />
+                  <song-item
+                    class="song-item"
+                    :index="index"
+                    :item="item"
+                    compact
+                    @play="handlePlay"
+                  />
                 </div>
               </div>
             </n-tab-pane>
@@ -128,8 +134,8 @@ import { useRoute, useRouter } from 'vue-router';
 
 import { getListDetail } from '@/api/list';
 import { getUserDetail, getUserPlaylist, getUserRecord } from '@/api/user';
-import SongItem from '@/components/common/SongItem.vue';
 import { navigateToMusicList } from '@/components/common/MusicListNavigator';
+import SongItem from '@/components/common/SongItem.vue';
 import { usePlayerStore } from '@/store/modules/player';
 import type { Playlist } from '@/type/listDetail';
 import type { IUserDetail } from '@/type/user';
@@ -190,7 +196,7 @@ const loadUserData = async () => {
     // 2. 单独处理听歌记录请求，这个请求可能会无权限
     try {
       const recordRes = await getUserRecord(userId.value);
-      
+
       if (recordRes.data && recordRes.data.allData) {
         recordList.value = recordRes.data.allData.map((item: any) => ({
           ...item,
@@ -233,11 +239,11 @@ watch(
 // 替换显示歌单的方法
 const openPlaylist = (item: any) => {
   listLoading.value = true;
-  
-  getListDetail(item.id).then(res => {
+
+  getListDetail(item.id).then((res) => {
     currentList.value = res.data.playlist;
     listLoading.value = false;
-    
+
     navigateToMusicList(router, {
       id: item.id,
       type: 'playlist',
@@ -260,12 +266,12 @@ const handlePlay = () => {
 // 显示关注列表
 const showFollowList = () => {
   if (!userDetail.value) return;
-  
+
   router.push({
     path: `/user/follows`,
-    query: { 
+    query: {
       uid: userId.value.toString(),
-      name: userDetail.value.profile.nickname 
+      name: userDetail.value.profile.nickname
     }
   });
 };
@@ -273,12 +279,12 @@ const showFollowList = () => {
 // 显示粉丝列表
 const showFollowerList = () => {
   if (!userDetail.value) return;
-  
+
   router.push({
     path: `/user/followers`,
-    query: { 
+    query: {
       uid: userId.value.toString(),
-      name: userDetail.value.profile.nickname 
+      name: userDetail.value.profile.nickname
     }
   });
 };
@@ -340,8 +346,9 @@ const isArtist = (profile: any) => {
         .label {
           @apply text-lg font-bold;
         }
-        
-        &:nth-child(1), &:nth-child(2) {
+
+        &:nth-child(1),
+        &:nth-child(2) {
           @apply cursor-pointer transition-all duration-200;
           @apply hover:bg-black hover:bg-opacity-20 rounded-lg px-2;
         }
@@ -426,7 +433,7 @@ const isArtist = (profile: any) => {
   .no-permission {
     @apply flex flex-col items-center justify-center text-gray-500 dark:text-gray-400;
     @apply p-4 rounded-lg;
-    
+
     i {
       @apply text-3xl mb-2;
     }

src/renderer/views/user/followers.vue

@@ -7,7 +7,7 @@
       <div class="page-title" v-else>
         {{ t('user.follower.myFollowersTitle') }}
       </div>
-      
+
       <n-spin v-if="followerListLoading && followerList.length === 0" size="large" />
       <n-scrollbar v-else class="scrollbar-container">
         <div v-if="followerList.length === 0" class="empty-follower">
@@ -69,7 +69,7 @@
 import { useMessage } from 'naive-ui';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter, useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import { getUserFollowers } from '@/api/user';
 import { useUserStore } from '@/store/modules/user';
@@ -101,13 +101,13 @@ const user = computed(() => userStore.user);
 const checkTargetUser = () => {
   const uid = route.query.uid;
   const name = route.query.name;
-  
+
   if (uid && typeof uid === 'string') {
     targetUserId.value = parseInt(uid);
     targetUserName.value = typeof name === 'string' ? name : '';
     return true;
   }
-  
+
   // 如果没有指定用户ID，则显示当前登录用户的粉丝列表
   return checkLoginStatus();
 };
@@ -133,17 +133,13 @@ const checkLoginStatus = () => {
 // 加载粉丝列表
 const loadFollowerList = async () => {
   // 确定要加载哪个用户的粉丝列表
-  const userId = targetUserId.value || (user.value?.userId);
-  
+  const userId = targetUserId.value || user.value?.userId;
+
   if (!userId) return;
 
   try {
     followerListLoading.value = true;
-    const { data } = await getUserFollowers(
-      userId,
-      followerLimit.value,
-      followerOffset.value
-    );
+    const { data } = await getUserFollowers(userId, followerLimit.value, followerOffset.value);
 
     if (!data || !data.followeds) {
       hasMoreFollowers.value = false;
@@ -191,14 +187,17 @@ onMounted(() => {
 });
 
 // 监听路由变化重新加载数据
-watch(() => route.query, (newQuery) => {
-  if (newQuery.uid && newQuery.uid !== targetUserId.value?.toString()) {
-    followerList.value = []; // 清空列表
-    followerOffset.value = 0; // 重置偏移量
-    checkTargetUser();
-    loadFollowerList();
+watch(
+  () => route.query,
+  (newQuery) => {
+    if (newQuery.uid && newQuery.uid !== targetUserId.value?.toString()) {
+      followerList.value = []; // 清空列表
+      followerOffset.value = 0; // 重置偏移量
+      checkTargetUser();
+      loadFollowerList();
+    }
   }
-});
+);
 </script>
 
 <style lang="scss" scoped>

src/renderer/views/user/follows.vue

@@ -7,7 +7,7 @@
       <div class="page-title" v-else>
         {{ t('user.follow.myFollowsTitle') }}
       </div>
-      
+
       <n-spin v-if="followListLoading && followList.length === 0" size="large" />
       <n-scrollbar v-else class="scrollbar-container">
         <div v-if="followList.length === 0" class="empty-follow">
@@ -69,7 +69,7 @@
 import { useMessage } from 'naive-ui';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRouter, useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import { getUserFollows } from '@/api/user';
 import { useUserStore } from '@/store/modules/user';
@@ -101,13 +101,13 @@ const user = computed(() => userStore.user);
 const checkTargetUser = () => {
   const uid = route.query.uid;
   const name = route.query.name;
-  
+
   if (uid && typeof uid === 'string') {
     targetUserId.value = parseInt(uid);
     targetUserName.value = typeof name === 'string' ? name : '';
     return true;
   }
-  
+
   // 如果没有指定用户ID，则显示当前登录用户的关注列表
   return checkLoginStatus();
 };
@@ -133,8 +133,8 @@ const checkLoginStatus = () => {
 // 加载关注列表
 const loadFollowList = async () => {
   // 确定要加载哪个用户的关注列表
-  const userId = targetUserId.value || (user.value?.userId);
-  
+  const userId = targetUserId.value || user.value?.userId;
+
   if (!userId) return;
 
   try {
@@ -187,14 +187,17 @@ onMounted(() => {
 });
 
 // 监听路由变化重新加载数据
-watch(() => route.query, (newQuery) => {
-  if (newQuery.uid && newQuery.uid !== targetUserId.value?.toString()) {
-    followList.value = []; // 清空列表
-    followOffset.value = 0; // 重置偏移量
-    checkTargetUser();
-    loadFollowList();
+watch(
+  () => route.query,
+  (newQuery) => {
+    if (newQuery.uid && newQuery.uid !== targetUserId.value?.toString()) {
+      followList.value = []; // 清空列表
+      followOffset.value = 0; // 重置偏移量
+      checkTargetUser();
+      loadFollowList();
+    }
   }
-});
+);
 </script>
 
 <style lang="scss" scoped>

src/renderer/views/user/index.vue

@@ -30,7 +30,9 @@
         <div class="play-list" :class="setAnimationClass('animate__fadeInLeft')">
           <div class="title">
             <div>{{ t('user.playlist.created') }}</div>
-            <div class="import-btn" @click="goToImportPlaylist" v-if="isElectron">{{ t('comp.playlist.import.button') }}</div>
+            <div class="import-btn" @click="goToImportPlaylist" v-if="isElectron">
+              {{ t('comp.playlist.import.button') }}
+            </div>
           </div>
           <n-scrollbar>
             <div
@@ -91,7 +93,11 @@
       </div>
     </div>
     <!-- 未登录时显示登录组件 -->
-    <div v-if="!isLoggedIn && isMobile" class="login-container" :class="setAnimationClass('animate__fadeIn')">
+    <div
+      v-if="!isLoggedIn && isMobile"
+      class="login-container"
+      :class="setAnimationClass('animate__fadeIn')"
+    >
       <login-component @login-success="handleLoginSuccess" />
     </div>
   </div>
@@ -105,9 +111,9 @@ import { useRouter } from 'vue-router';
 
 import { getListDetail } from '@/api/list';
 import { getUserDetail, getUserPlaylist, getUserRecord } from '@/api/user';
+import { navigateToMusicList } from '@/components/common/MusicListNavigator';
 import PlayBottom from '@/components/common/PlayBottom.vue';
 import SongItem from '@/components/common/SongItem.vue';
-import { navigateToMusicList } from '@/components/common/MusicListNavigator';
 import { usePlayerStore } from '@/store/modules/player';
 import { useUserStore } from '@/store/modules/user';
 import type { Playlist } from '@/type/listDetail';
@@ -243,11 +249,11 @@ onMounted(() => {
 // 替换显示歌单的方法
 const openPlaylist = (item: any) => {
   listLoading.value = true;
-  
-  getListDetail(item.id).then(res => {
+
+  getListDetail(item.id).then((res) => {
     list.value = res.data.playlist;
     listLoading.value = false;
-    
+
     navigateToMusicList(router, {
       id: item.id,
       type: 'playlist',
@@ -300,11 +306,11 @@ const isLoggedIn = computed(() => userStore.user);
     .title {
       @apply text-lg font-bold flex items-center justify-between;
       @apply text-gray-900 dark:text-white;
-     .import-btn {
-      @apply bg-light-100 font-normal rounded-lg px-2 py-1 text-opacity-70 text-sm hover:bg-light-200 hover:text-green-500 dark:bg-dark-200 dark:hover:bg-dark-300 dark:hover:text-green-400;
-      @apply cursor-pointer;
-      @apply transition-all duration-200;
-     }
+      .import-btn {
+        @apply bg-light-100 font-normal rounded-lg px-2 py-1 text-opacity-70 text-sm hover:bg-light-200 hover:text-green-500 dark:bg-dark-200 dark:hover:bg-dark-300 dark:hover:text-green-400;
+        @apply cursor-pointer;
+        @apply transition-all duration-200;
+      }
     }
 
     .user-name {
@@ -388,7 +394,7 @@ const isLoggedIn = computed(() => userStore.user);
 
     &-name {
       @apply text-gray-900 dark:text-white text-base flex items-center gap-2;
-      
+
       .playlist-creator-tag {
         @apply inline-flex items-center justify-center px-2 rounded-full text-xs;
         @apply bg-light-300 text-primary dark:bg-dark-300 dark:text-white;