feat: 歌曲右键 添加不喜欢功能以过滤每日推荐歌曲

feat: 添加播放速度控制功能

.env.development

@@ -1,12 +1,9 @@
 # 你的接口地址 (必填)
-VITE_API_LOCAL = ***
-# 音乐破解接口地址
+VITE_API = http://127.0.0.1:30488
+# 音乐破解接口地址 web端
 VITE_API_MUSIC = ***
-# 代理地址
-VITE_API_PROXY = ***
 
 
 # 本地运行代理地址
-VITE_API_PROXY = /api
+VITE_API_LOCAL = /api
 VITE_API_MUSIC_PROXY = /music
-VITE_API_PROXY_MUSIC = /music_proxy

README.md

@@ -9,11 +9,14 @@
     <img src="https://img.shields.io/github/v/release/algerkong/AlgerMusicPlayer?style=for-the-badge&logo=github&label=Release&logoColor=white&color=1a67af" alt="GitHub release">
   </a>
   <a href="https://pd.qq.com/s/cs056n33q?b=5">
-    <img src="https://img.shields.io/badge/QQ%E9%A2%91%E9%81%93-algermusic-blue?style=for-the-badge" alt="QQ频道">
+    <img src="https://img.shields.io/badge/QQ频道-algermusic-blue?style=for-the-badge&color=yellow" alt="加入频道">
   </a>
   <a href="https://t.me/+9efsKRuvKBk2NWVl">
     <img src="https://img.shields.io/badge/AlgerMusic-blue?style=for-the-badge&logo=telegram&logoColor=white&label=Telegram" alt="Telegram">
   </a>
+   <a href="https://donate.alger.fun/">
+    <img src="https://img.shields.io/badge/%E9%A1%B9%E7%9B%AE%E6%8D%90%E8%B5%A0-blue?style=for-the-badge&logo=telegram&logoColor=pink&color=pink&label=%E8%B5%9E%E5%8A%A9" alt="赞助">
+  </a>
 </div>
 </div>
 <div align="center">
@@ -26,23 +29,28 @@
 - 📝 功能
   - 播放历史记录
   - 歌曲收藏管理
+  - 歌单 MV 排行榜 每日推荐
   - 自定义快捷键配置（全局或应用内）
 - 🎨 界面与交互
   - 沉浸式歌词显示（点击左下角封面进入）
   - 独立桌面歌词窗口
   - 明暗主题切换
-  - 可远程控制播放
+  - 迷你模式
+  - 状态栏控制
+  - 多语言支持
+  
 - 🎼 音乐功能
   - 支持歌单、MV、专辑等完整音乐服务
   - 灰色音乐资源解析（基于 @unblockneteasemusic/server）
   - 音乐单独解析
   - EQ均衡器
-  - 定时播放
-  - 高品质音乐试听（需网易云VIP）
+  - 定时播放 远程控制播放 倍速播放
+  - 高品质音乐
   - 音乐文件下载（支持右键下载和批量下载, 附带歌词封面等信息）
+  - 搜索 MV 音乐 专辑 歌单 bilibili
+  - 音乐单独选择音源解析
 - 🚀 技术特性
   - 本地化服务，无需依赖在线API (基于 netease-cloud-music-api)
-  - 自动更新检测
   - 全平台适配（Desktop & Web & Mobile Web & Android<测试> & ios<后续>）
 
 ## 项目简介
@@ -54,18 +62,27 @@
 ## 软件截图
 ![首页白](./docs/image.png)
 ![首页黑](./docs/image3.png)
-![歌词](./docs/image1.png)
+![歌词](./docs/image6.png)
 ![桌面歌词](./docs/image2.png)
 ![设置页面](./docs/image4.png)
+![音乐远程控制](./docs/image5.png)
 
-## 技术栈
-
-### 主要框架
-- Vue 3 - 渐进式 JavaScript 框架
-- TypeScript - JavaScript 的超集，添加了类型系统
-- Electron - 跨平台桌面应用开发框架
-- Vite - 下一代前端构建工具
-- Naive UI - 基于 Vue 3 的组件库
+## 项目启动
+```bash
+npm install
+npm run dev
+```
+## 项目打包
+```bash
+# web
+npm run build 
+# win
+npm run build:win
+# mac
+npm run build:mac
+# linux
+npm run build:linux
+```
 
 
 ## 赞赏☕️

src/i18n/lang/en-US/player.ts

@@ -58,7 +58,9 @@ export default {
     next: 'Next',
     volume: 'Volume',
     favorite: 'Favorite {name}',
-    unFavorite: 'Unfavorite {name}'
+    unFavorite: 'Unfavorite {name}',
+    playbackSpeed: 'Playback Speed',
+    advancedControls: 'Advanced Controls',
   },
   eq: {
     title: 'Equalizer',

src/i18n/lang/en-US/songItem.ts

@@ -6,7 +6,9 @@ export default {
     addToPlaylist: 'Add to Playlist',
     favorite: 'Like',
     unfavorite: 'Unlike',
-    removeFromPlaylist: 'Remove from Playlist'
+    removeFromPlaylist: 'Remove from Playlist',
+    dislike: 'Dislike',
+    undislike: 'Undislike',
   },
   message: {
     downloading: 'Downloading, please wait...',
@@ -14,5 +16,13 @@ export default {
     downloadQueued: 'Added to download queue',
     addedToNextPlay: 'Added to play next',
     getUrlFailed: 'Failed to get music download URL, please check if logged in'
+  },
+  dialog: {
+    dislike:{
+      title: 'Dislike',
+      content: 'Are you sure you want to dislike this song?',
+      positiveText: 'Dislike',
+      negativeText: 'Cancel'
+    }
   }
 };

src/i18n/lang/zh-CN/player.ts

@@ -59,7 +59,9 @@ export default {
     volume: '音量',
     favorite: '已收藏{name}',
     unFavorite: '已取消收藏{name}',
-    miniPlayBar: '迷你播放栏'
+    miniPlayBar: '迷你播放栏',
+    playbackSpeed: '播放速度',
+    advancedControls: '更多设置s',
   },
   eq: {
     title: '均衡器',

src/i18n/lang/zh-CN/songItem.ts

@@ -6,7 +6,9 @@ export default {
     addToPlaylist: '添加到歌单',
     favorite: '喜欢',
     unfavorite: '取消喜欢',
-    removeFromPlaylist: '从歌单中删除'
+    removeFromPlaylist: '从歌单中删除',
+    dislike: '不喜欢',
+    undislike: '取消不喜欢',
   },
   message: {
     downloading: '正在下载中，请稍候...',
@@ -14,5 +16,13 @@ export default {
     downloadQueued: '已加入下载队列',
     addedToNextPlay: '已添加到下一首播放',
     getUrlFailed: '获取音乐下载地址失败，请检查是否登录'
+  },
+  dialog: {
+    dislike: {
+      title: '提示！',
+      content: '确认不喜欢这首歌吗？再次进入将从每日推荐中排除。',
+      positiveText: '不喜欢',
+      negativeText: '取消'
+    }
   }
 };

src/renderer/components/EQControl.vue

@@ -264,7 +264,6 @@ const formatFreq = (freq: number) => {
 .eq-control {
   @apply p-6 rounded-lg;
   @apply bg-light dark:bg-dark;
-  @apply shadow-lg dark:shadow-none;
   width: 100%;
   max-width: 700px;
 

src/renderer/components/common/SongItem.vue

@@ -5,6 +5,7 @@
     @contextmenu.prevent="handleContextMenu"
     @mouseenter="handleMouseEnter"
     @mouseleave="handleMouseLeave"
+    @dblclick.stop="playMusicEvent(item)"
   >
     <div v-if="compact && index !== undefined" class="song-item-index" :class="{ 'text-green-500': isPlaying }">
       {{ index + 1 }}
@@ -42,7 +43,7 @@
       </div>
       <template v-else-if="compact">
         <div class="song-item-content-compact-wrapper">
-          <div class="w-60 flex-shrink-0 flex items-center" @dblclick="playMusicEvent(item)">
+          <div class="w-60 flex-shrink-0 flex items-center">
             <n-ellipsis class="song-item-content-title text-ellipsis" line-clamp="1" :class="{ 'text-green-500': isPlaying }">
               {{ item.name }}
             </n-ellipsis>
@@ -68,7 +69,7 @@
         </div>
       </template>
       <template v-else>
-        <div class="song-item-content-title" @dblclick="playMusicEvent(item)">
+        <div class="song-item-content-title">
           <n-ellipsis class="text-ellipsis" line-clamp="1" :class="{ 'text-green-500': isPlaying }">{{ item.name }}</n-ellipsis>
         </div>
         <div class="song-item-content-name">
@@ -133,7 +134,7 @@
 <script lang="ts" setup>
 import { cloneDeep } from 'lodash';
 import type { MenuOption } from 'naive-ui';
-import { NEllipsis, NImage, useMessage } from 'naive-ui';
+import { NEllipsis, NImage, useMessage, useDialog } from 'naive-ui';
 import { computed, h, inject, ref, useTemplateRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -306,7 +307,13 @@ const dropdownOptions = computed<MenuOption[]>(() => {
         h('i', {
           class: `iconfont ${isFavorite.value ? 'ri-heart-fill text-red-500' : 'ri-heart-line'}`
         })
-    }
+    },
+    // 不喜欢
+    {
+      label: isDislike.value ? t('songItem.menu.undislike') : t('songItem.menu.dislike'),
+      key: 'dislike',
+      icon: () => h('i', { class: `iconfont  ${isDislike.value ? 'ri-dislike-fill text-green-500': 'ri-dislike-line'}` })
+    },
   ];
 
   if (props.canRemove) {
@@ -342,18 +349,30 @@ const handleMenuClick = (e: MouseEvent) => {
 
 const handleSelect = (key: string | number) => {
   showDropdown.value = false;
-  if (key === 'download') {
-    downloadMusic();
-  } else if (key === 'playNext') {
-    handlePlayNext();
-  } else if (key === 'addToPlaylist') {
-    openPlaylistDrawer?.(props.item.id);
-  } else if (key === 'favorite') {
-    toggleFavorite(new Event('click'));
-  } else if (key === 'play') {
-    playMusicEvent(props.item);
-  } else if (key === 'remove') {
-    emits('remove-song', props.item.id);
+  switch (key) {
+    case 'download':
+      downloadMusic();
+      break;
+    case 'playNext':
+      handlePlayNext();
+      break;
+    case 'addToPlaylist':
+      openPlaylistDrawer?.(props.item.id);
+      break;
+    case 'favorite':
+      toggleFavorite(new Event('click'));
+      break;
+    case 'play':
+      playMusicEvent(props.item);
+      break;
+    case 'remove':
+      emits('remove-song', props.item.id);
+      break;
+    case 'dislike':
+      toggleDislike(new Event('click'));
+      break;
+    default:
+      break;
   }
 };
 
@@ -449,7 +468,6 @@ const playMusicEvent = async (item: SongResult) => {
     if (!result) {
       throw new Error('播放失败');
     }
-    playerStore.isPlay = true;
     emits('play', item);
   } catch (error) {
     console.error('播放出错:', error);
@@ -463,6 +481,12 @@ const isFavorite = computed(() => {
   return playerStore.favoriteList.includes(numericId);
 });
 
+const isDislike = computed(() => {
+  // 将id转换为number，兼容B站视频ID
+  const numericId = typeof props.item.id ==='string'? parseInt(props.item.id, 10) : props.item.id;
+  return playerStore.dislikeList.includes(numericId);
+})
+
 // 切换收藏状态
 const toggleFavorite = async (e: Event) => {
   e.stopPropagation();
@@ -475,6 +499,24 @@ const toggleFavorite = async (e: Event) => {
     playerStore.addToFavorite(numericId);
   }
 };
+const dialog = useDialog();
+const toggleDislike = async (e: Event) => {
+  e.stopPropagation();
+  if (isDislike.value) {
+    playerStore.removeFromDislikeList(props.item.id);
+    return;
+  }
+  dialog.warning({
+    title: t('songItem.dialog.dislike.title'),
+    content: t('songItem.dialog.dislike.content'),
+    positiveText: t('songItem.dialog.dislike.positiveText'),
+    negativeText: t('songItem.dialog.dislike.negativeText'),
+    onPositiveClick: () => {
+      playerStore.addToDislikeList(props.item.id);
+    }
+  });
+ 
+}
 
 // 切换选择状态
 const toggleSelect = () => {

src/renderer/components/home/TopBanner.vue

@@ -31,7 +31,7 @@
 
               <div class="mt-2">
                 <p
-                  v-for="item in dayRecommendData?.dailySongs.slice(0, 5)"
+                  v-for="item in getDisplayDaySongs.slice(0, 5)"
                   :key="item.id"
                   class="text-el"
                 >
@@ -250,13 +250,16 @@ const loadArtistData = async () => {
 // 加载不需要登录的数据
 const loadNonUserData = async () => {
   try {
-
-        // 获取每日推荐
-        try {
+    // 获取每日推荐
+    try {
       const {
         data: { data: dayRecommend }
       } = await getDayRecommend();
-      dayRecommendData.value = dayRecommend as unknown as IDayRecommend;
+      const dayRecommendSource = dayRecommend as unknown as IDayRecommend;
+      dayRecommendData.value = {
+        ...dayRecommendSource,
+        dailySongs: dayRecommendSource.dailySongs.filter((song: any) =>!playerStore.dislikeList.includes(song.id))
+      };
     } catch (error) {
       console.error('获取每日推荐失败:', error);
     }
@@ -288,6 +291,12 @@ const loadUserData = async () => {
 const handleArtistClick = (id: number) => {
   navigateToArtist(id);
 };
+const getDisplayDaySongs = computed(() => {
+  if(!dayRecommendData.value){
+    return [];
+  }
+  return dayRecommendData.value.dailySongs.filter((song) => !playerStore.dislikeList.includes(song.id));
+})
 
 const showDayRecommend = () => {
   if (!dayRecommendData.value?.dailySongs) return;
@@ -295,7 +304,7 @@ const showDayRecommend = () => {
   navigateToMusicList(router, {
     type: 'dailyRecommend',
     name: t('comp.recommendSinger.songlist'),
-    songList: dayRecommendData.value.dailySongs,
+    songList: getDisplayDaySongs.value,
     canRemove: false
   });
 };

src/renderer/components/player/AdvancedControlsPopover.vue

@@ -0,0 +1,251 @@
+<template>
+  <n-dropdown 
+    :show="showDropdown" 
+    :options="dropdownOptions" 
+    trigger="hover" 
+    :z-index="9999999"
+    @select="handleSelect"
+    placement="top"
+    @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">
+              <i class="ri-time-line"></i>
+            </span>
+          </div>
+        </div>
+      </template>
+      {{ t('player.playBar.advancedControls') }}
+    </n-tooltip>
+  </n-dropdown>
+
+  <!-- EQ 均衡器弹窗 -->
+  <n-modal v-model:show="showEQModal" :mask-closable="true" :unstable-show-mask="false">
+    <div class="eq-modal-content">
+      <div class="modal-close" @click="showEQModal = false">
+        <i class="ri-close-line"></i>
+      </div>
+      <eq-control />
+    </div>
+  </n-modal>
+
+  <!-- 定时关闭弹窗 -->
+  <n-modal v-model:show="playerStore.showSleepTimer" :mask-closable="true" :unstable-show-mask="false">
+    <div class="timer-modal-content">
+      <div class="modal-close" @click="playerStore.showSleepTimer = false">
+        <i class="ri-close-line"></i>
+      </div>
+      <sleep-timer />
+    </div>
+  </n-modal>
+
+  <!-- 播放速度设置弹窗 -->
+  <n-modal v-model:show="showSpeedModal" :mask-closable="true" :unstable-show-mask="false">
+    <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" 
+          :key="option.key"
+          class="speed-option"
+          :class="{ 'active': playbackRate === option.key }"
+          @click="selectSpeed(option.key)"
+        >
+          {{ option.label }}
+        </div>
+      </div>
+    </div>
+  </n-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, h } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { DropdownOption } from 'naive-ui';
+import { usePlayerStore } from '@/store/modules/player';
+import EqControl from '@/components/EQControl.vue';
+import SleepTimer from '@/components/player/SleepTimer.vue';
+
+const { t } = useI18n();
+const playerStore = usePlayerStore();
+
+// 下拉菜单状态
+const showDropdown = ref(false);
+const showEQModal = ref(false);
+const showSpeedModal = ref(false);
+const isEQVisible = ref(false);
+
+// 播放速度状态
+const playbackRate = computed(() => playerStore.playbackRate);
+
+
+// 播放速度选项
+const playbackRateOptions = [
+  { label: '0.5x', key: 0.5 },
+  { label: '0.75x', key: 0.75 },
+  { label: '1.0x', key: 1.0 },
+  { label: '1.25x', key: 1.25 },
+  { label: '1.5x', key: 1.5 },
+  { label: '2.0x', key: 2.0 }
+];
+
+// 是否有激活的睡眠定时器
+const hasActiveSleepTimer = computed(() => playerStore.hasSleepTimerActive);
+
+// 检查是否有任何高级设置是激活状态
+const hasActiveSettings = computed(() => {
+  return playbackRate.value !== 1.0 || hasActiveSleepTimer.value || isEQVisible.value;
+});
+
+// 下拉菜单选项
+const dropdownOptions = computed<DropdownOption[]>(() => [
+  {
+    label: t('player.playBar.eq'),
+    key: 'eq',
+    icon: () => h('i', { class: 'ri-equalizer-line' })
+  },
+  {
+    label: t('player.sleepTimer.title'),
+    key: 'timer',
+    icon: () => h('i', { class: 'ri-timer-line' }),
+    // 如果有激活的定时器，添加标记
+    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
+  }
+]);
+
+// 处理菜单选择
+const handleSelect = (key: string) => {
+  switch (key) {
+    case 'eq':
+      showEQModal.value = true;
+      break;
+    case 'timer':
+      playerStore.showSleepTimer = true;
+      break;
+    case 'speed':
+      showSpeedModal.value = true;
+      break;
+  }
+};
+
+// 选择播放速度
+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);
+  z-index: 9998;
+  min-width: 80px;
+  text-align: center;
+  animation: fadeInDown 0.3s ease-out;
+  
+  @keyframes fadeInDown {
+    from {
+      transform: translate(-50%, -100%);
+      opacity: 0;
+    }
+    to {
+      transform: translate(-50%, 0);
+      opacity: 1;
+    }
+  }
+  
+  span {
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.5px;
+    font-weight: 500;
+  }
+}
+
+.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 {
+      @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;
+    }
+  }
+}
+
+.eq-modal-content,
+.timer-modal-content,
+.speed-modal-content {
+  @apply p-6 rounded-3xl bg-white dark:bg-dark;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.speed-modal-content {
+  h3 {
+    @apply text-lg font-medium mb-4 text-center;
+  }
+
+  .speed-options {
+    @apply flex flex-wrap justify-center gap-4 my-8 mx-4;
+
+    .speed-option {
+      @apply py-2 px-4 rounded-full cursor-pointer transition-all;
+      @apply bg-gray-100 dark:bg-gray-800;
+      @apply hover:bg-green-100 dark:hover:bg-green-900;
+
+      &.active {
+        @apply bg-green-500 text-white;
+      }
+    }
+  }
+}
+
+.active-option-mark {
+  @apply ml-2 text-xs bg-green-500 text-white py-0.5 px-1.5 rounded-full;
+  font-weight: 500;
+}
+
+.modal-close {
+  @apply absolute top-4 right-4 cursor-pointer hover:text-green-500;
+  i {
+    @apply text-2xl;
+  }
+}
+</style> 

src/renderer/components/player/PlayBar.vue

@@ -56,10 +56,13 @@
       </div>
     </div>
     <div class="music-content">
-      <div class="music-content-title">
+      <div class="music-content-title flex items-center">
         <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>
       </div>
       <div class="music-content-name">
         <n-ellipsis
@@ -133,28 +136,10 @@
         </template>
         {{ t('player.playBar.reparse') }}
       </n-tooltip>
-      <n-popover
-        v-if="isElectron"
-        trigger="click"
-        :z-index="99999999"
-        content-class="music-eq"
-        raw
-        :show-arrow="false"
-        :delay="200"
-        placement="top"
-      >
-        <template #trigger>
-          <n-tooltip trigger="hover" :z-index="9999999">
-            <template #trigger>
-              <i class="iconfont ri-equalizer-line" :class="{ 'text-green-500': isEQVisible }"></i>
-            </template>
-            {{ t('player.playBar.eq') }}
-          </n-tooltip>
-        </template>
-        <eq-control />
-      </n-popover>
-      <!-- 定时关闭功能 -->
-      <sleep-timer-popover mode="desktop" />
+      
+      <!-- 高级控制菜单按钮（整合了 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>
@@ -172,9 +157,6 @@ import { useThrottleFn } from '@vueuse/core';
 import { useMessage } from 'naive-ui';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-
-import EqControl from '@/components/EQControl.vue';
-import SleepTimerPopover from '@/components/player/SleepTimerPopover.vue';
 import ReparsePopover from '@/components/player/ReparsePopover.vue';
 import {
   allTime,
@@ -190,10 +172,12 @@ import MusicFull from '@/layout/components/MusicFull.vue';
 import { audioService } from '@/services/audioService';
 import { 
   isBilibiliIdMatch, 
-  usePlayerStore 
+  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();
@@ -319,6 +303,8 @@ const playModeText = computed(() => {
   }
 });
 
+// 播放速度控制
+const {playbackRate} = storeToRefs(playerStore);
 // 切换播放模式
 const togglePlayMode = () => {
   playerStore.togglePlayMode();
@@ -400,8 +386,6 @@ const handleArtistClick = (id: number) => {
   navigateToArtist(id);
 };
 
-const isEQVisible = ref(false);
-
 // 打开播放列表抽屉
 const openPlayListDrawer = () => {
   playerStore.setPlayListDrawerVisible(true);
@@ -430,7 +414,7 @@ const openPlayListDrawer = () => {
   }
 
   .music-content {
-    width: 160px;
+    width: 200px;
     @apply ml-4;
 
     &-title {
@@ -702,4 +686,31 @@ const openPlayListDrawer = () => {
   color: white;
   animation: spin 1s linear infinite;
 }
+
+.play-speed {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 0 8px;
+}
+
+.speed-button {
+  font-size: 14px;
+  color: var(--text-color);
+  padding: 4px 8px;
+  border-radius: 4px;
+  background: var(--hover-color);
+}
+
+.speed-button:hover {
+  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;
+  vertical-align: 1px;
+}
 </style>

src/renderer/components/player/SleepTimer.vue

@@ -0,0 +1,342 @@
+<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'">
+          <div class="timer-value countdown-timer">{{ formattedRemainingTime }}</div>
+        </template>
+        <template v-else-if="timerType === 'songs'">
+          <div class="timer-value">{{ 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">
+        <h4 class="option-title">{{ t('player.sleepTimer.timeMode') }}</h4>
+        <div class="time-options">
+          <n-button
+            v-for="minutes in [15, 30, 60, 90]"
+            :key="minutes"
+            size="small"
+            class="time-option-btn"
+            @click="handleSetTimeTimer(minutes)"
+            round
+          >
+            {{ minutes }}{{ t('player.sleepTimer.minutes') }}
+          </n-button>
+          <div class="custom-time">
+            <n-input-number
+              v-model:value="customMinutes"
+              :min="1"
+              :max="300"
+              size="small"
+              class="custom-time-input"
+              round
+            />
+            <n-button
+              size="small"
+              type="primary"
+              class="custom-time-btn"
+              :disabled="!customMinutes"
+              @click="handleSetTimeTimer(customMinutes)"
+              round
+            >
+              {{ t('player.sleepTimer.set') }}
+            </n-button>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 按歌曲数定时 -->
+      <div class="option-section">
+        <h4 class="option-title">{{ t('player.sleepTimer.songsMode') }}</h4>
+        <div class="songs-options">
+          <n-button
+            v-for="songs in [1, 3, 5, 10]"
+            :key="songs"
+            size="small"
+            class="songs-option-btn"
+            @click="handleSetSongsTimer(songs)"
+            round
+          >
+            {{ songs }}{{ t('player.sleepTimer.songs') }}
+          </n-button>
+          <div class="custom-songs">
+            <n-input-number
+              v-model:value="customSongs"
+              :min="1"
+              :max="50"
+              size="small"
+              class="custom-songs-input"
+              round
+            />
+            <n-button
+              size="small"
+              type="primary"
+              class="custom-songs-btn"
+              :disabled="!customSongs"
+              @click="handleSetSongsTimer(customSongs)"
+              round
+            >
+              {{ t('player.sleepTimer.set') }}
+            </n-button>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 播放完列表后关闭 -->
+      <div class="option-section playlist-end-section">
+        <n-button block class="playlist-end-btn" @click="handleSetPlaylistEndTimer" round>
+          {{ t('player.sleepTimer.playlistEnd') }}
+        </n-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, onMounted, onUnmounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { usePlayerStore } from '@/store/modules/player';
+
+const { t } = useI18n();
+const playerStore = usePlayerStore();
+
+// 从store获取所有相关状态
+const { sleepTimer } = storeToRefs(playerStore);
+
+// 本地状态，用于UI展示
+const customMinutes = ref(30);
+const customSongs = ref(5);
+// 添加一个刷新触发变量，用于强制更新倒计时
+const refreshTrigger = ref(0);
+
+// 计算属性，判断定时器状态
+const hasTimerActive = computed(() => {
+  return playerStore.hasSleepTimerActive;
+});
+
+const timerType = computed(() => {
+  return sleepTimer.value.type;
+});
+
+// 剩余歌曲数
+const remainingSongs = computed(() => {
+  return playerStore.sleepTimerRemainingSongs;
+});
+
+// 处理设置时间定时器
+function handleSetTimeTimer(minutes: number) {
+  playerStore.setSleepTimerByTime(minutes);
+}
+
+// 处理设置歌曲数定时器
+function handleSetSongsTimer(songs: number) {
+  playerStore.setSleepTimerBySongs(songs);
+}
+
+// 处理设置播放列表结束定时器
+function handleSetPlaylistEndTimer() {
+  playerStore.setSleepTimerAtPlaylistEnd();
+}
+
+// 处理取消定时器
+function handleCancelTimer() {
+  playerStore.clearSleepTimer();
+}
+
+// 格式化剩余时间为 HH:MM:SS
+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}`;
+});
+
+// 监听剩余时间变化
+let timerInterval: number | null = null;
+
+onMounted(() => {
+  // 如果当前有定时器，开始更新UI
+  if (hasTimerActive.value && timerType.value === 'time') {
+    startTimerUpdate();
+  }
+  
+  // 监听定时器状态变化
+  watch(
+    () => [hasTimerActive.value, timerType.value], 
+    ([newHasTimer, newType]) => {
+      if (newHasTimer && newType === 'time') {
+        startTimerUpdate();
+      } else {
+        stopTimerUpdate();
+      }
+    }
+  );
+});
+
+// 启动定时器更新UI
+function startTimerUpdate() {
+  stopTimerUpdate(); // 先停止之前的计时器
+  
+  // 每秒更新UI
+  timerInterval = window.setInterval(() => {
+    // 更新刷新触发器，强制重新计算
+    refreshTrigger.value = Date.now();
+  }, 500) as unknown as number;
+}
+
+// 停止定时器更新UI
+function stopTimerUpdate() {
+  if (timerInterval) {
+    clearInterval(timerInterval);
+    timerInterval = null;
+  }
+}
+
+onUnmounted(() => {
+  stopTimerUpdate();
+});
+</script>
+
+<style lang="scss" scoped>
+.sleep-timer-content {
+  @apply w-full p-4;
+
+  .timer-title {
+    @apply text-lg font-medium mb-4 text-center;
+  }
+
+  // 激活状态显示
+  .sleep-timer-active {
+    @apply flex flex-col items-center;
+
+    // 定时状态卡片
+    .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);
+      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;
+        }
+      }
+
+      // 标签文本
+      .timer-label {
+        @apply text-base text-gray-600 dark:text-gray-300;
+      }
+    }
+
+    // 取消按钮
+    .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;
+      }
+    }
+  }
+
+  // 定时器选项区域
+  .sleep-timer-options {
+    @apply flex flex-col;
+
+    // 选项部分
+    .option-section {
+      @apply mb-7;
+
+      // 选项标题
+      .option-title {
+        @apply text-base font-medium mb-4 text-gray-700 dark:text-gray-200;
+        letter-spacing: 0.3px;
+      }
+
+      // 时间/歌曲选项容器
+      .time-options, .songs-options {
+        @apply flex flex-wrap gap-2;
+
+        // 选项按钮共享样式
+        .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);
+          @apply dark:shadow-gray-900/20;
+          
+          &:hover {
+            @apply transform scale-105 shadow-md;
+          }
+          
+          &:active {
+            @apply transform scale-95;
+          }
+        }
+
+        // 自定义输入区域
+        .custom-time, .custom-songs {
+          @apply flex items-center space-x-2 mt-4 w-full;
+
+          // 输入框
+          .custom-time-input, .custom-songs-input {
+            @apply flex-1;
+          }
+
+          // 设置按钮
+          .custom-time-btn, .custom-songs-btn {
+            @apply py-2 px-4 rounded-full transition-all duration-200;
+          }
+        }
+      }
+    }
+
+    // 播放列表结束选项
+    .playlist-end-section {
+      @apply mt-2;
+
+      .playlist-end-btn {
+        @apply py-3 text-base rounded-full transition-all duration-200;
+      }
+    }
+  }
+}
+</style> 

src/renderer/components/player/SleepTimerPopover.vue

@@ -1,478 +0,0 @@
-<template>
-  <n-popover
-    trigger="click"
-    :z-index="99999999"
-    content-class="sleep-timer"
-    raw
-    :show-arrow="false"
-    placement="top"
-    display-directive="show"
-  >
-    <template #trigger>
-      <n-tooltip trigger="hover" :z-index="9999999">
-        <template #trigger>
-          <div class="control-btn timer" :class="{ 'mobile-timer': mode === 'mobile' }">
-          <i 
-            class="iconfont ri-time-line"
-            :class="{ 'text-green-500': hasTimerActive }"
-          ></i>
-        </div>
-        </template>
-        {{ t('player.sleepTimer.title') }}
-      </n-tooltip>
-    </template>
-    <div class="sleep-timer-container" :class="{ 'mobile-sleep-timer-container': mode === 'mobile' }">
-      <div class="sleep-timer-back"></div>
-      
-      <div class="sleep-timer-content">
-        <div class="sleep-timer-title">{{ t('player.sleepTimer.title') }}</div>
-        
-        <div v-if="hasTimerActive" class="sleep-timer-active">
-          <div class="timer-status">
-            <template v-if="timerType === 'time'">
-              <div class="timer-value countdown-timer">{{ formattedRemainingTime }}</div>
-              <div class="timer-label">{{ t('player.sleepTimer.minutesRemaining', { minutes: Math.ceil(remainingMinutes/60) }) }}</div>
-            </template>
-            <template v-else-if="timerType === 'songs'">
-              <div class="timer-value">{{ 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">
-            <h4 class="option-title">{{ t('player.sleepTimer.timeMode') }}</h4>
-            <div class="time-options">
-              <n-button
-                v-for="minutes in [15, 30, 60, 90]"
-                :key="minutes"
-                size="small"
-                class="time-option-btn"
-                @click="handleSetTimeTimer(minutes)"
-                round
-              >
-                {{ minutes }}{{ t('player.sleepTimer.minutes') }}
-              </n-button>
-              <div class="custom-time">
-                <n-input-number
-                  v-model:value="customMinutes"
-                  :min="1"
-                  :max="300"
-                  size="small"
-                  class="custom-time-input"
-                  round
-                />
-                <n-button
-                  size="small"
-                  type="primary"
-                  class="custom-time-btn"
-                  :disabled="!customMinutes"
-                  @click="handleSetTimeTimer(customMinutes)"
-                  round
-                >
-                  {{ t('player.sleepTimer.set') }}
-                </n-button>
-              </div>
-            </div>
-          </div>
-          
-          <!-- 按歌曲数定时 -->
-          <div class="option-section">
-            <h4 class="option-title">{{ t('player.sleepTimer.songsMode') }}</h4>
-            <div class="songs-options">
-              <n-button
-                v-for="songs in [1, 3, 5, 10]"
-                :key="songs"
-                size="small"
-                class="songs-option-btn"
-                @click="handleSetSongsTimer(songs)"
-                round
-              >
-                {{ songs }}{{ t('player.sleepTimer.songs') }}
-              </n-button>
-              <div class="custom-songs">
-                <n-input-number
-                  v-model:value="customSongs"
-                  :min="1"
-                  :max="50"
-                  size="small"
-                  class="custom-songs-input"
-                  round
-                />
-                <n-button
-                  size="small"
-                  type="primary"
-                  class="custom-songs-btn"
-                  :disabled="!customSongs"
-                  @click="handleSetSongsTimer(customSongs)"
-                  round
-                >
-                  {{ t('player.sleepTimer.set') }}
-                </n-button>
-              </div>
-            </div>
-          </div>
-          
-          <!-- 播放完列表后关闭 -->
-          <div class="option-section playlist-end-section">
-            <n-button block class="playlist-end-btn" @click="handleSetPlaylistEndTimer" round>
-              {{ t('player.sleepTimer.playlistEnd') }}
-            </n-button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </n-popover>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref, onMounted, onUnmounted, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { storeToRefs } from 'pinia';
-
-import { usePlayerStore } from '@/store/modules/player';
-
-// 组件接收一个mode参数，用于标识是移动端还是桌面端
-defineProps({
-  mode: {
-    type: String,
-    default: 'desktop' // 'desktop' 或 'mobile'
-  }
-});
-
-const { t } = useI18n();
-const playerStore = usePlayerStore();
-
-// 从store获取所有相关状态
-const { sleepTimer} = storeToRefs(playerStore);
-
-// 本地状态，用于UI展示
-const customMinutes = ref(30);
-const customSongs = ref(5);
-// 添加一个刷新触发变量，用于强制更新倒计时
-const refreshTrigger = ref(0);
-
-// 计算属性，判断定时器状态
-const hasTimerActive = computed(() => {
-  return playerStore.hasSleepTimerActive;
-});
-
-const timerType = computed(() => {
-  return sleepTimer.value.type;
-});
-
-// 剩余时间（分钟）
-const remainingMinutes = computed(() => {
-  return playerStore.sleepTimerRemainingTime;
-});
-
-// 剩余歌曲数
-const remainingSongs = computed(() => {
-  return playerStore.sleepTimerRemainingSongs;
-});
-
-// 处理设置时间定时器
-function handleSetTimeTimer(minutes: number) {
-  playerStore.setSleepTimerByTime(minutes);
-}
-
-// 处理设置歌曲数定时器
-function handleSetSongsTimer(songs: number) {
-  playerStore.setSleepTimerBySongs(songs);
-}
-
-// 处理设置播放列表结束定时器
-function handleSetPlaylistEndTimer() {
-  playerStore.setSleepTimerAtPlaylistEnd();
-}
-
-// 处理取消定时器
-function handleCancelTimer() {
-  playerStore.clearSleepTimer();
-}
-
-// 格式化剩余时间为 HH:MM:SS
-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}`;
-});
-
-// 监听剩余时间变化
-let timerInterval: number | null = null;
-
-onMounted(() => {
-  // 如果当前有定时器，开始更新UI
-  if (hasTimerActive.value && timerType.value === 'time') {
-    startTimerUpdate();
-  }
-  
-  // 监听定时器状态变化
-  watch(
-    () => [hasTimerActive.value, timerType.value], 
-    ([newHasTimer, newType]) => {
-      if (newHasTimer && newType === 'time') {
-        startTimerUpdate();
-      } else {
-        stopTimerUpdate();
-      }
-    }
-  );
-});
-
-// 启动定时器更新UI
-function startTimerUpdate() {
-  stopTimerUpdate(); // 先停止之前的计时器
-  
-  // 每秒更新UI
-  timerInterval = window.setInterval(() => {
-    // 更新刷新触发器，强制重新计算
-    refreshTrigger.value = Date.now();
-  }, 500) as unknown as number;
-}
-
-// 停止定时器更新UI
-function stopTimerUpdate() {
-  if (timerInterval) {
-    clearInterval(timerInterval);
-    timerInterval = null;
-  }
-}
-
-onUnmounted(() => {
-  stopTimerUpdate();
-});
-</script>
-
-<style lang="scss" scoped>
-.control-btn.timer {
-  @apply cursor-pointer;
-  
-  .iconfont {
-    @apply text-2xl m-4 transition-all duration-300 ease-in-out;
-    
-    &:hover {
-      @apply text-green-500 transform scale-110;
-    }
-  }
-
-  &.mobile-timer {
-    @apply flex items-center justify-center;
-    height: 56px;
-    width: 56px;
-  }
-}
-
-// 主容器样式
-.sleep-timer-container {
-  width: 380px;
-  height: auto;
-  @apply relative overflow-hidden;
-  border-radius: 16px;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
-  transform-origin: top center;
-  animation: popoverEnter 0.2s cubic-bezier(0.3, 0, 0.2, 1);
-  
-  // 入场动画
-  @keyframes popoverEnter {
-    from {
-      opacity: 0;
-      transform: translateY(-10px) scale(0.98);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-    }
-  }
-  
-  // 移动端样式
-  &.mobile-sleep-timer-container {
-    width: 92vw;
-    max-width: 400px;
-    @apply rounded-t-2xl;
-    max-height: 500px;
-  }
-
-  // 背景毛玻璃效果
-  .sleep-timer-back {
-    @apply absolute top-0 left-0 w-full h-full dark:bg-gray-900 dark:bg-opacity-75 dark:border-gray-700;
-    backdrop-filter: blur(25px);
-    -webkit-backdrop-filter: blur(25px);
-    background-color: rgba(255, 255, 255, 0.75);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-  }
-
-  // 内容区域
-  .sleep-timer-content {
-    @apply p-6 relative z-10;
-
-    // 标题
-    .sleep-timer-title {
-      @apply text-xl font-bold text-center mb-6 text-gray-800 dark:text-gray-100;
-      letter-spacing: 0.5px;
-    }
-
-    // 激活状态显示
-    .sleep-timer-active {
-      @apply flex flex-col items-center;
-
-      // 定时状态卡片
-      .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);
-        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;
-          }
-        }
-
-        // 标签文本
-        .timer-label {
-          @apply text-base text-gray-600 dark:text-gray-300;
-        }
-      }
-
-      // 取消按钮
-      .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;
-        }
-      }
-    }
-
-    // 定时器选项区域
-    .sleep-timer-options {
-      @apply flex flex-col;
-
-      // 选项部分
-      .option-section {
-        @apply mb-7;
-
-        // 选项标题
-        .option-title {
-          @apply text-base font-medium mb-4 text-gray-700 dark:text-gray-200;
-          letter-spacing: 0.3px;
-        }
-
-        // 时间/歌曲选项容器
-        .time-options, .songs-options {
-          @apply flex flex-wrap gap-2;
-
-          // 选项按钮共享样式
-          .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);
-            @apply dark:shadow-gray-900/20;
-            
-            &:hover {
-              @apply transform scale-105 shadow-md;
-            }
-            
-            &:active {
-              @apply transform scale-95;
-            }
-          }
-
-          // 自定义输入区域
-          .custom-time, .custom-songs {
-            @apply flex items-center space-x-2 mt-4 w-full;
-
-            // 输入框
-            .custom-time-input, .custom-songs-input {
-              @apply flex-1;
-              
-              :deep(.n-input) {
-                @apply rounded-full dark:bg-gray-800 dark:bg-opacity-40 dark:border-gray-700;
-                backdrop-filter: blur(10px);
-                -webkit-backdrop-filter: blur(10px);
-                background-color: rgba(255, 255, 255, 0.5);
-                border: 1px solid rgba(255, 255, 255, 0.1);
-                transition: all 0.3s ease;
-                
-                &:hover, &:focus {
-                  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
-                }
-              }
-            }
-
-            // 设置按钮
-            .custom-time-btn, .custom-songs-btn {
-              @apply py-2 px-4 rounded-full transition-all duration-200;
-              
-              &:hover {
-                @apply transform scale-105 shadow-md;
-              }
-              
-              &:active {
-                @apply transform scale-95;
-              }
-            }
-          }
-        }
-      }
-
-      // 播放列表结束选项
-      .playlist-end-section {
-        @apply mt-2;
-
-        .playlist-end-btn {
-          @apply py-3 text-base 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);
-          @apply dark:shadow-gray-900/20;
-          
-          &:hover {
-            @apply transform scale-105 shadow-md;
-          }
-          
-          &:active {
-            @apply transform scale-95;
-          }
-        }
-      }
-    }
-  }
-}
-</style> 

src/renderer/components/player/SleepTimerTop.vue

@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <!-- 定时关闭倒计时显示区域 -->
+    <div v-if="hasActiveSleepTimer" class="sleep-timer-countdown" @click="handleShowTimer">
+      <i class="iconfont ri-time-line mr-1"></i>
+      <span>{{ formattedRemainingTime }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { usePlayerStore } from '@/store/modules/player';
+
+const { t } = useI18n();
+// 定时器状态
+const playerStore = usePlayerStore();
+const { sleepTimer } = storeToRefs(playerStore);
+const hasActiveSleepTimer = computed(() => playerStore.hasSleepTimerActive);
+const refreshTrigger = ref(0);
+
+// 检查定时器是否已结束
+const checkTimerExpired = () => {
+  if (sleepTimer.value.type === 'time' && sleepTimer.value.endTime) {
+    const now = Date.now();
+    if (now >= sleepTimer.value.endTime) {
+      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 });
+    }
+    if (sleepTimer.value.type === 'end') {
+      return t('player.sleepTimer.activeUntilEnd');
+    }
+    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 {
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  }
+});
+
+// 监听剩余时间变化
+let timerUpdateInterval: number | null = null;
+
+watch(
+  () => hasActiveSleepTimer.value,
+  (newHasTimer) => {
+    if (newHasTimer && sleepTimer.value.type === 'time') {
+      startTimerUpdate();
+    } else if (!newHasTimer) {
+      stopTimerUpdate();
+    }
+  },
+  { immediate: true }
+);
+
+// 启动定时器更新UI
+function startTimerUpdate() {
+  stopTimerUpdate(); // 先停止之前的计时器
+  
+  // 每秒更新UI
+  timerUpdateInterval = window.setInterval(() => {
+    // 更新刷新触发器，强制重新计算
+    refreshTrigger.value = Date.now();
+  }, 1000) as unknown as number;
+}
+
+// 停止定时器更新UI
+function stopTimerUpdate() {
+  if (timerUpdateInterval) {
+    clearInterval(timerUpdateInterval);
+    timerUpdateInterval = null;
+  }
+}
+
+const handleShowTimer = () => {
+  playerStore.showSleepTimer = !playerStore.showSleepTimer;
+};
+
+// 播放器卸载时清除定时器
+onUnmounted(() => {
+  stopTimerUpdate();
+});
+</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);
+  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%);
+      opacity: 0;
+    }
+    to {
+      transform: translate(-50%, -100%);
+      opacity: 1;
+    }
+  }
+  
+  span {
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.5px;
+    font-weight: 500;
+  }
+}
+</style>

src/renderer/layout/AppLayout.vue

@@ -52,6 +52,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"/>
   </div>
 </template>
 
@@ -69,6 +70,7 @@ 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];

src/renderer/services/audioService.ts

@@ -18,6 +18,8 @@ class AudioService {
 
   private bypass = false;
 
+  private playbackRate = 1.0; // 添加播放速度属性
+
   // 预设的 EQ 频段
   private readonly frequencies = [31, 62, 125, 250, 500, 1000, 2000, 4000, 8000, 16000];
 
@@ -143,7 +145,7 @@ class AudioService {
     if ('setPositionState' in navigator.mediaSession) {
       navigator.mediaSession.setPositionState({
         duration: this.currentSound.duration(),
-        playbackRate: 1.0,
+        playbackRate: this.playbackRate,
         position: this.currentSound.seek() as number
       });
     }
@@ -565,6 +567,7 @@ class AudioService {
             volume: localStorage.getItem('volume')
               ? parseFloat(localStorage.getItem('volume') as string)
               : 1,
+            rate: this.playbackRate, // 设置初始播放速度
             format: ['mp3', 'aac'],
             onloaderror: (_, error) => {
               console.error('Audio load error:', error);
@@ -747,6 +750,35 @@ class AudioService {
   public setCurrentPreset(preset: string): void {
     localStorage.setItem('currentPreset', preset);
   }
+
+  public setPlaybackRate(rate: number) {
+    if (!this.currentSound) return;
+    this.playbackRate = rate;
+
+    // Howler 的 rate() 在 html5 模式下不生效
+    this.currentSound.rate(rate);
+
+    // 取出底层 HTMLAudioElement，改原生 playbackRate
+    const sounds = (this.currentSound as any)._sounds as any[];
+    sounds.forEach(({ _node }) => {
+      if (_node instanceof HTMLAudioElement) {
+        _node.playbackRate = rate;
+      }
+    });
+
+    // 同步给 Media Session UI
+    if ('mediaSession' in navigator && 'setPositionState' in navigator.mediaSession) {
+      navigator.mediaSession.setPositionState({
+        duration: this.currentSound.duration(),
+        playbackRate: rate,
+        position: this.currentSound.seek() as number
+      });
+    }
+  }
+
+  public getPlaybackRate(): number {
+    return this.playbackRate;
+  }
 }
 
 export const audioService = new AudioService();

src/renderer/store/modules/player.ts

@@ -388,8 +388,9 @@ export const usePlayerStore = defineStore('player', () => {
   const playMode = ref(getLocalStorageItem('playMode', 0));
   const musicFull = ref(false);
   const favoriteList = ref<Array<number | string>>(getLocalStorageItem('favoriteList', []));
+  const dislikeList = ref<Array<number | string>>(getLocalStorageItem('dislikeList', []));
   const savedPlayProgress = ref<number | undefined>();
-  
+  const showSleepTimer = ref(false); // 定时弹窗
   // 添加播放列表抽屉状态
   const playListDrawerVisible = ref(false);
   
@@ -399,6 +400,9 @@ export const usePlayerStore = defineStore('player', () => {
     value: 0
   }));
 
+  // 播放速度状态
+  const playbackRate = ref(parseFloat(getLocalStorageItem('playbackRate', '1.0')));
+
   // 清空播放列表
   const clearPlayAll = async () => {
     audioService.pause()
@@ -500,6 +504,7 @@ export const usePlayerStore = defineStore('player', () => {
       const updatedPlayMusic = await getSongDetail(originalMusic);
       playMusic.value = updatedPlayMusic;
       playMusicUrl.value = updatedPlayMusic.playMusicUrl as string;
+      music.playMusicUrl = updatedPlayMusic.playMusicUrl as string;
 
       // 保存到本地存储
       localStorage.setItem('currentPlayMusic', JSON.stringify(playMusic.value));
@@ -1027,6 +1032,16 @@ export const usePlayerStore = defineStore('player', () => {
     localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
   };
 
+  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);
+    localStorage.setItem('dislikeList', JSON.stringify(dislikeList.value));
+  }
+
   const removeFromPlayList = (id: number | string) => {
     const index = playList.value.findIndex((item) => item.id === id);
     if (index === -1) return;
@@ -1042,6 +1057,14 @@ export const usePlayerStore = defineStore('player', () => {
     setPlayList(newPlayList);
   };
 
+  // 设置播放速度
+  const setPlaybackRate = (rate: number) => {
+    playbackRate.value = rate;
+    audioService.setPlaybackRate(rate);
+    // 保存到本地存储
+    localStorage.setItem('playbackRate', rate.toString());
+  };
+
   // 初始化播放状态
   const initializePlayState = async () => {
     const settingStore = useSettingsStore();
@@ -1093,6 +1116,11 @@ export const usePlayerStore = defineStore('player', () => {
         localStorage.removeItem('playProgress');
       }
     }
+
+    setTimeout(() => {
+      audioService.setPlaybackRate(playbackRate.value);
+    }, 2000);
+
   };
 
   const initializeFavoriteList = async () => {
@@ -1307,10 +1335,12 @@ export const usePlayerStore = defineStore('player', () => {
     musicFull,
     savedPlayProgress,
     favoriteList,
+    dislikeList,
     playListDrawerVisible,
     
     // 定时关闭相关
     sleepTimer,
+    showSleepTimer,
     currentSleepTimer,
     hasSleepTimerActive,
     sleepTimerRemainingTime,
@@ -1340,9 +1370,13 @@ export const usePlayerStore = defineStore('player', () => {
     addToFavorite,
     removeFromFavorite,
     removeFromPlayList,
+    addToDislikeList,
+    removeFromDislikeList,
     playAudio,
     reparseCurrentSong,
     setPlayListDrawerVisible,
-    handlePause
+    handlePause,
+    playbackRate,
+    setPlaybackRate
   };
 });

src/renderer/views/music/MusicListPage.vue

@@ -238,6 +238,11 @@ onMounted(() => {
 });
 
 // 从 pinia 或路由参数获取数据
+
+  // 从路由参数获取
+const routeId = route.params.id as string;
+const routeType = route.query.type as string;
+
 const initData = () => {
   // 优先从 pinia 获取数据
   if (musicStore.currentMusicList) {
@@ -251,9 +256,7 @@ const initData = () => {
     return;
   }
   
-  // 从路由参数获取
-  const routeId = route.params.id as string;
-  const routeType = route.query.type as string;
+
   
   if (routeId) {
     // 这里根据 type 和 id 加载数据
@@ -323,14 +326,22 @@ const getCoverImgUrl = computed(() => {
   return '';
 });
 
+const getDisplaySongs = computed(() => {
+  if(routeType === 'dailyRecommend') {
+    return displayedSongs.value.filter((song) => !playerStore.dislikeList.includes(song.id));
+  }else {
+    return displayedSongs.value;
+  }
+})
+
 // 过滤歌曲列表
 const filteredSongs = computed(() => {
   if (!searchKeyword.value) {
-    return displayedSongs.value;
+    return getDisplaySongs.value;
   }
 
   const keyword = searchKeyword.value.toLowerCase().trim();
-  return displayedSongs.value.filter((song) => {
+  return getDisplaySongs.value.filter((song) => {
     const songName = song.name?.toLowerCase() || '';
     const albumName = song.al?.name?.toLowerCase() || '';
     const artists = song.ar || song.artists || [];