✨ feat: 修改播放列表展示形式，优化播放逻辑，添加清空播放列表功能

2026-04-03 14:20:50 +08:00 · 2025-05-17 13:27:50 +08:00
parent 56b3ecfd25
commit 2e96161bd0
14 changed files with 382 additions and 166 deletions
--- a/src/i18n/lang/en-US/player.ts
+++ b/src/i18n/lang/en-US/player.ts
@@ -105,5 +105,13 @@ export default {
    playbackStopped: 'Music playback stopped',
    minutesRemaining: '{minutes} min remaining',
    songsRemaining: '{count} songs remaining'
+  },
+  playList: {
+    clearAll: 'Clear Playlist',
+    alreadyEmpty: 'Playlist is already empty',
+    cleared: 'Playlist cleared',
+    empty: 'Playlist is empty',
+    clearConfirmTitle: 'Clear Playlist',
+    clearConfirmContent: 'This will clear all songs in the playlist and stop the current playback. Continue?'
  }
 };
--- a/src/i18n/lang/zh-CN/player.ts
+++ b/src/i18n/lang/zh-CN/player.ts
@@ -106,5 +106,13 @@ export default {
    playbackStopped: '音乐播放已停止',
    minutesRemaining: '剩余{minutes}分钟',
    songsRemaining: '剩余{count}首歌'
+  },
+  playList: {
+    clearAll: '清空播放列表',
+    alreadyEmpty: '播放列表已经为空',
+    cleared: '已清空播放列表',
+    empty: '播放列表为空',
+    clearConfirmTitle: '清空播放列表',
+    clearConfirmContent: '这将清空所有播放列表中的歌曲并停止当前播放。是否继续？'
  }
 };
--- a/src/renderer/components/common/SearchItem.vue
+++ b/src/renderer/components/common/SearchItem.vue
@@ -33,7 +33,6 @@
 <script setup lang="ts">
 import { getAlbum, getListDetail } from '@/api/list';
 import MvPlayer from '@/components/MvPlayer.vue';
-import { audioService } from '@/services/audioService';
 import { usePlayerStore } from '@/store/modules/player';
 import { IMvItem } from '@/type/mv';
 import { getImgUrl } from '@/utils';
@@ -129,9 +128,7 @@ const handleClick = async () => {
 };

 const handleShowMv = async () => {
-  playerStore.setIsPlay(false);
-  playerStore.setPlayMusic(false);
-  audioService.getCurrentSound()?.pause();
+  playerStore.handlePause();
  showPop.value = true;
 };
 </script>
--- a/src/renderer/components/common/SongItem.vue
+++ b/src/renderer/components/common/SongItem.vue
@@ -122,7 +122,7 @@
      :x="dropdownX"
      :y="dropdownY"
      :options="dropdownOptions"
-      :z-index="99999"
+      :z-index="99999999"
      placement="bottom-start"
      @clickoutside="showDropdown = false"
      @select="handleSelect"
@@ -137,9 +137,8 @@ import { NEllipsis, NImage, useMessage } from 'naive-ui';
 import { computed, h, inject, ref, useTemplateRef } from 'vue';
 import { useI18n } from 'vue-i18n';

-import { getSongUrl } from '@/hooks/MusicListHook';
+import { getSongUrl } from '@/store/modules/player';
 import { useArtist } from '@/hooks/useArtist';
-import { audioService } from '@/services/audioService';
 import { usePlayerStore } from '@/store';
 import type { SongResult } from '@/type/music';
 import { getImgUrl, isElectron } from '@/utils';
@@ -444,18 +443,6 @@ const imageLoad = async () => {

 // 播放音乐 设置音乐详情 打开音乐底栏
 const playMusicEvent = async (item: SongResult) => {
-  // 如果是当前正在播放的音乐，则切换播放/暂停状态
-  if (playMusic.value.id === item.id) {
-    if (play.value) {
-      playerStore.setPlayMusic(false);
-      audioService.getCurrentSound()?.pause();
-    } else {
-      playerStore.setPlayMusic(true);
-      audioService.getCurrentSound()?.play();
-    }
-    return;
-  }
-
  try {
    // 使用store的setPlay方法，该方法已经包含了B站视频URL处理逻辑
    const result = await playerStore.setPlay(item);
@@ -551,7 +538,7 @@ const handleMouseLeave = () => {
  @apply rounded-3xl p-3 flex items-center transition bg-transparent dark:text-white text-gray-900;

  &:hover {
-    @apply bg-gray-100 dark:bg-gray-800;
+    @apply bg-light-100 dark:bg-dark-100;

    .song-item-operating-compact {
      .song-item-operating-like,
--- a/src/renderer/components/player/MiniPlayBar.vue
+++ b/src/renderer/components/player/MiniPlayBar.vue
@@ -312,25 +312,7 @@ const handleNext = () => playerStore.nextPlay();

 const playMusicEvent = async () => {
  try {
-    if (!playerStore.playMusic?.id || !playerStore.playMusicUrl) {
-      console.warn('No valid music or URL available');
-      playerStore.setPlay(playerStore.playMusic);
-      return;
-    }
-
-    if (play.value) {
-      if (audioService.getCurrentSound()) {
-        audioService.pause();
-        playerStore.setPlayMusic(false);
-      }
-    } else {
-      if (audioService.getCurrentSound()) {
-        audioService.play();
-      } else {
-        await audioService.play(playerStore.playMusicUrl, playerStore.playMusic);
-      }
-      playerStore.setPlayMusic(true);
-    }
+    playerStore.setPlay(playerStore.playMusic);
  } catch (error) {
    console.error('播放出错:', error);
    playerStore.nextPlay();
--- a/src/renderer/components/player/MobilePlayBar.vue
+++ b/src/renderer/components/player/MobilePlayBar.vue
@@ -158,7 +158,6 @@ import SongItem from '@/components/common/SongItem.vue';
 import SleepTimerPopover from '@/components/player/SleepTimerPopover.vue';
 import { allTime, artistList, nowTime, playMusic, sound, textColors } from '@/hooks/MusicHook';
 import MusicFull from '@/layout/components/MusicFull.vue';
-import { audioService } from '@/services/audioService';
 import { usePlayerStore } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
 import type { SongResult } from '@/type/music';
@@ -235,25 +234,7 @@ const toggleFavorite = () => {
 // 播放暂停按钮事件
 const playMusicEvent = async () => {
  try {
-    if (!playMusic.value?.id || !playerStore.playMusicUrl) {
-      console.warn('No valid music or URL available');
-      playerStore.setPlay(playMusic.value);
-      return;
-    }
-
-    if (play.value) {
-      if (audioService.getCurrentSound()) {
-        audioService.pause();
-        playerStore.setPlayMusic(false);
-      }
-    } else {
-      if (audioService.getCurrentSound()) {
-        audioService.play();
-      } else {
-        await audioService.play(playerStore.playMusicUrl, playMusic.value);
-      }
-      playerStore.setPlayMusic(true);
-    }
+    playerStore.setPlay(playMusic.value);
  } catch (error) {
    console.error('播放出错:', error);
    playerStore.nextPlay();
--- a/src/renderer/components/player/PlayBar.vue
+++ b/src/renderer/components/player/PlayBar.vue
@@ -155,42 +155,12 @@
      </n-popover>
      <!-- 定时关闭功能 -->
      <sleep-timer-popover mode="desktop" />
-      <n-popover
-        trigger="click"
-        :z-index="99999999"
-        content-class="music-play"
-        raw
-        :show-arrow="false"
-        :delay="200"
-        arrow-wrapper-style=" border-radius:1.5rem"
-        @update-show="scrollToPlayList"
-      >
+      <n-tooltip trigger="hover" :z-index="9999999">
        <template #trigger>
-          <n-tooltip trigger="manual" :z-index="9999999">
-            <template #trigger>
-              <i class="iconfont icon-list"></i>
-            </template>
-            {{ t('player.playBar.playList') }}
-          </n-tooltip>
+          <i class="iconfont icon-list text-2xl hover:text-green-500 transition-colors cursor-pointer" @click="openPlayListDrawer"></i>
        </template>
-        <div class="music-play-list">
-          <div class="music-play-list-back"></div>
-          <n-virtual-list ref="palyListRef" :item-size="62" item-resizable :items="playList">
-            <template #default="{ item }">
-              <div class="music-play-list-content">
-                <div class="flex items-center justify-between">
-                  <song-item :key="item.id" class="flex-1" :item="item" mini></song-item>
-                  <div class="delete-btn" @click.stop="handleDeleteSong(item)">
-                    <i
-                      class="iconfont ri-delete-bin-line text-gray-400 hover:text-red-500 transition-colors"
-                    ></i>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </n-virtual-list>
-        </div>
-      </n-popover>
+        {{ t('player.playBar.playList') }}
+      </n-tooltip>
    </div>
    <!-- 播放音乐 -->
    <music-full ref="MusicFullRef" v-model="musicFullVisible" :background="background" />
@@ -200,10 +170,9 @@
 <script lang="ts" setup>
 import { useThrottleFn } from '@vueuse/core';
 import { useMessage } from 'naive-ui';
-import { computed, ref, useTemplateRef, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';

-import SongItem from '@/components/common/SongItem.vue';
 import EqControl from '@/components/EQControl.vue';
 import SleepTimerPopover from '@/components/player/SleepTimerPopover.vue';
 import ReparsePopover from '@/components/player/ReparsePopover.vue';
@@ -224,7 +193,6 @@ import {
  usePlayerStore 
 } from '@/store/modules/player';
 import { useSettingsStore } from '@/store/modules/settings';
-import type { SongResult } from '@/type/music';
 import { getImgUrl, isElectron, isMobile, secondToMinute, setAnimationClass } from '@/utils';

 const playerStore = usePlayerStore();
@@ -233,8 +201,6 @@ const { t } = useI18n();
 const message = useMessage();
 // 是否播放
 const play = computed(() => playerStore.isPlay);
-// 播放列表
-const playList = computed(() => playerStore.playList as SongResult[]);
 // 背景颜色
 const background = ref('#000');

@@ -372,42 +338,12 @@ const showSliderTooltip = ref(false);
 // 播放暂停按钮事件
 const playMusicEvent = async () => {
  try {
-    // 检查是否有有效的音乐对象
-    if (!playMusic.value?.id) {
-      console.warn('没有有效的播放对象');
-      return;
-    }
-
-    // 当前处于播放状态 -> 暂停
-    if (play.value) {
-      if (audioService.getCurrentSound()) {
-        audioService.pause();
-        playerStore.setPlayMusic(false);
-      }
-      return;
-    }
-
-    // 当前处于暂停状态 -> 播放
-    // 有音频实例，直接播放
-    if (audioService.getCurrentSound()) {
-      audioService.play();
+    const result = await playerStore.setPlay({ ...playMusic.value});
+    if (result) {
      playerStore.setPlayMusic(true);
-      return;
-    }
-
-    // 没有音频实例，重新获取并播放（包括重新获取B站视频URL）
-    try {
-      // 复用当前播放对象，但强制重新获取URL
-      const result = await playerStore.setPlay({ ...playMusic.value, playMusicUrl: undefined });
-      if (result) {
-        playerStore.setPlayMusic(true);
-      }
-    } catch (error) {
-      console.error('重新获取播放链接失败:', error);
-      message.error(t('player.playFailed'));
    }
  } catch (error) {
-    console.error('播放出错:', error);
+    console.error('重新获取播放链接失败:', error);
    message.error(t('player.playFailed'));
  }
 };
@@ -423,15 +359,6 @@ const setMusicFull = () => {
  }
 };

-const palyListRef = useTemplateRef('palyListRef') as any;
-
-const scrollToPlayList = (val: boolean) => {
-  if (!val) return;
-  setTimeout(() => {
-    palyListRef.value?.scrollTo({ top: playerStore.playListIndex * 62 });
-  }, 50);
-};
-
 const isFavorite = computed(() => {
  // 对于B站视频，使用ID匹配函数
  if (playMusic.value.source === 'bilibili' && playMusic.value.bilibiliData?.bvid) {
@@ -473,25 +400,11 @@ const handleArtistClick = (id: number) => {
  navigateToArtist(id);
 };

-// 监听播放栏显示状态
-watch(
-  () => MusicFullRef.value?.config?.hidePlayBar,
-  (newVal) => {
-    if (newVal && musicFullVisible.value) {
-      // 使用 animate.css 动画，不需要手动设置样式
-    }
-  }
-);
-
 const isEQVisible = ref(false);

-// 在 script setup 部分添加删除歌曲的处理函数
-const handleDeleteSong = (song: SongResult) => {
-  // 如果删除的是当前播放的歌曲，先切换到下一首
-  if (song.id === playMusic.value.id) {
-    playerStore.nextPlay();
-  }
-  playerStore.removeFromPlayList(song.id as number);
+// 打开播放列表抽屉
+const openPlayListDrawer = () => {
+  playerStore.setPlayListDrawerVisible(true);
 };
 </script>

--- a/src/renderer/components/player/PlayListDrawer.vue
+++ b/src/renderer/components/player/PlayListDrawer.vue
@@ -0,0 +1,287 @@
+<template>
+  <!-- 透明遮罩层，点击任意位置关闭 -->
+  <div v-if="internalVisible" class="fixed-overlay" @click="closePanel"></div>
+  
+  <!-- 使用animate.css进行动画效果 -->
+  <div 
+    v-if="internalVisible" 
+    class="playlist-panel"
+    :class="[
+      'animate__animated',
+      closing ? (isMobile ? 'animate__slideOutDown' : 'animate__slideOutRight') : 
+               (isMobile ? 'animate__slideInUp' : 'animate__slideInRight')
+    ]"
+  >
+    <div class="playlist-panel-header">
+      <div class="title">{{ t('player.playBar.playList') }}</div>
+      <div class="header-actions">
+        <n-tooltip trigger="hover">
+          <template #trigger>
+            <div class="action-btn" @click="handleClearPlaylist">
+              <i class="iconfont ri-delete-bin-line"></i>
+            </div>
+          </template>
+          {{ t('player.playList.clearAll')}}
+        </n-tooltip>
+        <div class="close-btn" @click="closePanel">
+          <i class="iconfont ri-close-line"></i>
+        </div>
+      </div>
+    </div>
+    <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>
+      </div>
+      <n-virtual-list v-else ref="playListRef" :item-size="62" item-resizable :items="playList">
+        <template #default="{ item }">
+          <div class="music-play-list-content">
+            <div class="flex items-center justify-between">
+              <song-item :key="item.id" class="flex-1" :item="item" mini></song-item>
+              <div class="delete-btn" @click.stop="handleDeleteSong(item)">
+                <i
+                  class="iconfont ri-delete-bin-line text-gray-400 hover:text-red-500 transition-colors"
+                ></i>
+              </div>
+            </div>
+          </div>
+        </template>
+      </n-virtual-list>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, onMounted, onUnmounted, nextTick } 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';
+import { isMobile } from '@/utils';
+
+const { t } = useI18n();
+const message = useMessage();
+const dialog = useDialog();
+const playerStore = usePlayerStore();
+
+// 内部状态控制组件的可见性
+const internalVisible = ref(false);
+const closing = ref(false);
+
+// 当前是否显示播放列表面板
+const show = computed({
+  get: () => playerStore.playListDrawerVisible,
+  set: (value) => {
+    playerStore.setPlayListDrawerVisible(value);
+  }
+});
+
+// 监听外部可见性变化
+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[]);
+
+// 播放列表引用
+const playListRef = ref<any>(null);
+
+// 关闭面板
+const closePanel = () => {
+  show.value = false;
+};
+
+// 清空播放列表
+const handleClearPlaylist = () => {
+  if (playList.value.length === 0) {
+    message.info(t('player.playList.alreadyEmpty'));
+    return;
+  }
+  
+  dialog.warning({
+    title: t('player.playList.clearConfirmTitle'),
+    content: t('player.playList.clearConfirmContent'),
+    positiveText: t('common.confirm'),
+    negativeText: t('common.cancel'),
+    style: { zIndex: 999999999 }, // 确保对话框显示在遮罩之上
+    onPositiveClick: () => {
+      // 清空播放列表
+      playerStore.clearPlayAll();
+      message.success(t('player.playList.cleared'));
+    }
+  });
+};
+
+// 处理键盘事件
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape' && internalVisible.value) {
+    closePanel();
+  }
+};
+
+// 添加和移除键盘事件监听
+onMounted(() => {
+  window.addEventListener('keydown', handleKeyDown);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown);
+});
+
+// 滚动到当前播放歌曲
+const scrollToCurrentSong = () => {
+  // 延长等待时间，确保列表已渲染完成
+  setTimeout(() => {
+    if (playListRef.value && playList.value.length > 0) {
+      const index = playerStore.playListIndex;
+      console.log('滚动到歌曲索引:', index);
+      playListRef.value.scrollTo({ 
+        top: (index > 3 ? (index - 3) : 0) * 62,
+      });
+    }
+  }, 100);
+};  
+
+// 删除歌曲
+const handleDeleteSong = (song: SongResult) => {
+  playerStore.removeFromPlayList(song.id as number);
+};
+</script>
+
+<style lang="scss" scoped>
+.fixed-overlay {
+  @apply fixed inset-0 z-[999999];
+  pointer-events: auto; // 允许点击关闭
+  cursor: default;
+}
+
+.playlist-panel {
+  @apply fixed right-0 z-[9999999] rounded-l-xl overflow-hidden;
+  width: 350px;
+  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;
+    }
+    
+    .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;
+      @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 {
+        @apply text-red-500 dark:text-red-400;
+      }
+    }
+  }
+  
+  &-content {
+    @apply h-[calc(70vh-60px)] overflow-hidden;
+  }
+}
+
+.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;
+  }
+}
+
+.music-play-list-content {
+  @apply pr-2 hover:bg-light-100 dark:hover:bg-dark-100;
+  &:hover {
+    .delete-btn {
+      @apply visible;
+    }
+  }
+  .delete-btn {
+    @apply pr-2 cursor-pointer invisible;
+    .iconfont {
+      @apply text-lg;
+    }
+  }
+}
+
+// 移动端适配
+@media (max-width: 768px) {
+  .playlist-panel {
+    width: 100%;
+    height: 60vh;
+    top: auto;
+    bottom: 56px; // 移动端底部留出导航栏高度
+    border-radius: 16px 16px 0 0;
+    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;
+      
+      &::before {
+        content: '';
+        position: absolute;
+        top: -15px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 40px;
+        height: 5px;
+        border-radius: 5px;
+        background-color: rgba(150, 150, 150, 0.3);
+      }
+    }
+    
+    &-content {
+      height: calc(60vh - 60px);
+    }
+  }
+}
+</style> 
--- a/src/renderer/hooks/MusicHook.ts
+++ b/src/renderer/hooks/MusicHook.ts
@@ -9,6 +9,7 @@ import pinia, { usePlayerStore } from '@/store';
 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;

@@ -905,7 +906,7 @@ audioService.on('url_expired', async (expiredTrack) => {
      // 处理网易云音乐，重新获取URL
      console.log('重新获取网易云音乐URL');
      try {
-        const { getSongUrl } = await import('@/store/modules/player');
+        
        const newUrl = await getSongUrl(expiredTrack.id, expiredTrack as any);

        if (newUrl) {
--- a/src/renderer/layout/AppLayout.vue
+++ b/src/renderer/layout/AppLayout.vue
@@ -20,7 +20,7 @@
              </keep-alive>
            </router-view>
          </div>
-          <play-bottom height="5rem" />
+          <play-bottom />
          <app-menu v-if="isMobile && !playerStore.musicFull" class="menu" :menus="menus" />
        </div>
      </div>
@@ -46,6 +46,8 @@
            settingsStore.setData?.hasDownloadingTasks)
        "
      />
+      <!-- 播放列表抽屉 -->
+      <play-list-drawer />
    </div>
    <install-app-modal v-if="!isElectron"></install-app-modal>
    <update-modal v-if="isElectron" />
@@ -88,7 +90,7 @@ 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 PlayListDrawer = defineAsyncComponent(() => import('@/components/player/PlayListDrawer.vue'));
 const PlaylistDrawer = defineAsyncComponent(() => import('@/components/common/PlaylistDrawer.vue'));

 const playerStore = usePlayerStore();
--- a/src/renderer/services/audioService.ts
+++ b/src/renderer/services/audioService.ts
@@ -720,7 +720,6 @@ class AudioService {
  }

  pause() {
-    // 直接强制重置操作锁
    this.forceResetOperationLock();
    
    if (this.currentSound) {
--- a/src/renderer/store/modules/player.ts
+++ b/src/renderer/store/modules/player.ts
@@ -389,11 +389,29 @@ export const usePlayerStore = defineStore('player', () => {
  const favoriteList = ref<Array<number | string>>(getLocalStorageItem('favoriteList', []));
  const savedPlayProgress = ref<number | undefined>();
  
+  // 添加播放列表抽屉状态
+  const playListDrawerVisible = ref(false);
+  
  // 定时关闭相关状态
  const sleepTimer = ref<SleepTimerInfo>(getLocalStorageItem('sleepTimer', {
    type: SleepTimerType.NONE,
    value: 0
  }));
+
+  // 清空播放列表
+  const clearPlayAll = async () => {
+    audioService.pause()
+    setTimeout(() => {
+      playMusic.value = {} as SongResult;
+      playMusicUrl.value = '';
+      playList.value = [];
+      playListIndex.value = 0;
+      localStorage.removeItem('currentPlayMusic');
+      localStorage.removeItem('currentPlayMusicUrl');
+      localStorage.removeItem('playList');
+      localStorage.removeItem('playListIndex');
+    }, 500);
+  };
  
  const timerInterval = ref<number | null>(null);
  
@@ -529,6 +547,17 @@ export const usePlayerStore = defineStore('player', () => {

  const setPlay = async (song: SongResult) => {
    try {
+    // 如果是当前正在播放的音乐，则切换播放/暂停状态
+    if (playMusic.value.id === song.id) {
+      if (play.value) {
+          setPlayMusic(false);
+          audioService.getCurrentSound()?.pause();
+        } else {
+          setPlayMusic(true);
+          audioService.getCurrentSound()?.play();
+        }
+        return;
+      }
      // 直接调用 handlePlayMusic，它会处理索引更新和播放逻辑
      const success = await handlePlayMusic(song);
      
@@ -986,7 +1015,7 @@ export const usePlayerStore = defineStore('player', () => {
    if (!isAlreadyInList) {
      favoriteList.value.push(id);
      localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
-      typeof id === 'number' && likeSong(id, true);
+      typeof id === 'number' && useUserStore().user && likeSong(id, true);
    }
  };

@@ -996,7 +1025,7 @@ export const usePlayerStore = defineStore('player', () => {
      favoriteList.value = favoriteList.value.filter(existingId => !isBilibiliIdMatch(existingId, id));
    } else {
      favoriteList.value = favoriteList.value.filter(existingId => existingId !== id);
-      likeSong(Number(id), false);
+      useUserStore().user && likeSong(Number(id), false);
    }
    localStorage.setItem('favoriteList', JSON.stringify(favoriteList.value));
  };
@@ -1252,6 +1281,24 @@ export const usePlayerStore = defineStore('player', () => {
    }
  };

+  // 设置播放列表抽屉显示状态
+  const setPlayListDrawerVisible = (value: boolean) => {
+    playListDrawerVisible.value = value;
+  };
+
+  // 播放
+  const handlePause = async () => {
+    try {
+      const currentSound = audioService.getCurrentSound();
+      if (currentSound) {
+        currentSound.pause();
+      }
+      setPlayMusic(false);
+    } catch (error) {
+      console.error('暂停播放失败:', error);
+    }
+  }
+
  return {
    play,
    isPlay,
@@ -1263,6 +1310,7 @@ export const usePlayerStore = defineStore('player', () => {
    musicFull,
    savedPlayProgress,
    favoriteList,
+    playListDrawerVisible,
    
    // 定时关闭相关
    sleepTimer,
@@ -1280,6 +1328,7 @@ export const usePlayerStore = defineStore('player', () => {
    currentPlayList,
    currentPlayListIndex,

+    clearPlayAll,
    setPlay,
    setIsPlay,
    nextPlay,
@@ -1295,6 +1344,8 @@ export const usePlayerStore = defineStore('player', () => {
    removeFromFavorite,
    removeFromPlayList,
    playAudio,
-    reparseCurrentSong
+    reparseCurrentSong,
+    setPlayListDrawerVisible,
+    handlePause
  };
 });
--- a/src/renderer/views/bilibili/BilibiliPlayer.vue
+++ b/src/renderer/views/bilibili/BilibiliPlayer.vue
@@ -425,7 +425,7 @@ const playCurrentAudio = async () => {

    // 播放当前选中的分P
    console.log('播放当前选中的分P:', currentAudio.name, '音频URL:', currentAudio.playMusicUrl);
-    playerStore.setPlayMusic(currentAudio);
+    playerStore.setPlay(currentAudio);  

    // 播放后通知用户已开始播放
    message.success('已开始播放');
--- a/src/renderer/views/favorite/index.vue
+++ b/src/renderer/views/favorite/index.vue
@@ -112,7 +112,7 @@
  import { getMusicDetail } from '@/api/music';
  import { getBilibiliProxyUrl, getBilibiliVideoDetail } from '@/api/bilibili';
  import SongItem from '@/components/common/SongItem.vue';
-  import { getSongUrl } from '@/hooks/MusicListHook';
+  import { getSongUrl } from '@/store/modules/player';
  import { usePlayerStore } from '@/store';
  import type { SongResult } from '@/type/music';
  import { isElectron, setAnimationClass, setAnimationDelay } from '@/utils';