From 0f55795ca9c5cb2bf53ee8088d3308fce1d206db Mon Sep 17 00:00:00 2001
From: alger <algerkc@qq.com>
Date: Tue, 1 Apr 2025 23:22:26 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E6=B7=BB=E5=8A=A0=E8=BF=B7?=
 =?UTF-8?q?=E4=BD=A0=E6=A8=A1=E5=BC=8F=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E8=BF=B7=E4=BD=A0=E7=AA=97=E5=8F=A3=E7=9A=84=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E4=B8=8E=E9=9A=90=E8=97=8F=EF=BC=8C=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E9=A1=B9=E4=BB=A5=E6=8E=A7=E5=88=B6=E8=BF=B7?=
 =?UTF-8?q?=E4=BD=A0=E6=92=AD=E6=94=BE=E6=A0=8F=E5=92=8C=E6=AD=8C=E8=AF=8D?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=EF=BC=8C=E4=BC=98=E5=8C=96=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E4=BB=A5=E9=80=82=E5=BA=94=E8=BF=B7=E4=BD=A0?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/i18n/lang/en-US/settings.ts               |   4 +-
 src/i18n/lang/zh-CN/player.ts                 |   3 +-
 src/i18n/lang/zh-CN/settings.ts               |   4 +-
 src/main/modules/window.ts                    | 110 +++-
 src/preload/index.d.ts                        |   4 +
 src/preload/index.ts                          |   4 +
 src/renderer/App.vue                          |  25 +-
 src/renderer/assets/css/base.css              |   1 +
 .../components/lyric/LyricSettings.vue        |  16 +-
 .../components/player/MiniPlayBar.vue         | 591 ++++++++++++++++++
 .../player}/MobilePlayBar.vue                 |   0
 .../player}/PlayBar.vue                       |  58 +-
 src/renderer/hooks/MusicHook.ts               |   2 +-
 src/renderer/layout/AppLayout.vue             |  26 +-
 src/renderer/layout/MiniLayout.vue            |  16 +
 src/renderer/layout/components/MusicFull.vue  |  78 ++-
 src/renderer/layout/components/TitleBar.vue   |   8 +
 src/renderer/router/index.ts                  |  41 +-
 src/renderer/store/modules/settings.ts        |   7 +
 src/renderer/utils/shortcut.ts                |  81 +++
 20 files changed, 990 insertions(+), 89 deletions(-)
 create mode 100644 src/renderer/components/player/MiniPlayBar.vue
 rename src/renderer/{layout/components => components/player}/MobilePlayBar.vue (100%)
 rename src/renderer/{layout/components => components/player}/PlayBar.vue (90%)
 create mode 100644 src/renderer/layout/MiniLayout.vue
 create mode 100644 src/renderer/utils/shortcut.ts

diff --git a/src/i18n/lang/en-US/settings.ts b/src/i18n/lang/en-US/settings.ts
index 2e5f67c..0e5ab57 100644
--- a/src/i18n/lang/en-US/settings.ts
+++ b/src/i18n/lang/en-US/settings.ts
@@ -181,7 +181,9 @@ export default {
       default: 'Default',
       light: 'Light',
       dark: 'Dark'
-    }
+    },
+    hideMiniPlayBar: 'Hide Mini Play Bar',
+    hideLyrics: 'Hide Lyrics'
   },
   shortcutSettings: {
     title: 'Shortcut Settings',
diff --git a/src/i18n/lang/zh-CN/player.ts b/src/i18n/lang/zh-CN/player.ts
index fb4b1cf..d1f5e00 100644
--- a/src/i18n/lang/zh-CN/player.ts
+++ b/src/i18n/lang/zh-CN/player.ts
@@ -48,7 +48,8 @@ export default {
     next: '下一首',
     volume: '音量',
     favorite: '已收藏{name}',
-    unFavorite: '已取消收藏{name}'
+    unFavorite: '已取消收藏{name}',
+    miniPlayBar: '迷你播放栏'
   },
   eq: {
     title: '均衡器',
diff --git a/src/i18n/lang/zh-CN/settings.ts b/src/i18n/lang/zh-CN/settings.ts
index 551cdbe..334e198 100644
--- a/src/i18n/lang/zh-CN/settings.ts
+++ b/src/i18n/lang/zh-CN/settings.ts
@@ -181,7 +181,9 @@ export default {
       default: '默认',
       light: '亮色',
       dark: '暗色'
-    }
+    },
+    hideMiniPlayBar: '隐藏迷你播放栏',
+    hideLyrics: '隐藏歌词'
   },
   shortcutSettings: {
     title: '快捷键设置',
diff --git a/src/main/modules/window.ts b/src/main/modules/window.ts
index 04b0c99..c5c48c9 100644
--- a/src/main/modules/window.ts
+++ b/src/main/modules/window.ts
@@ -1,10 +1,19 @@
 import { is } from '@electron-toolkit/utils';
-import { app, BrowserWindow, globalShortcut, ipcMain, session, shell } from 'electron';
+import { app, BrowserWindow, globalShortcut, ipcMain, screen, session, shell } from 'electron';
 import Store from 'electron-store';
 import { join } from 'path';
 
 const store = new Store();
 
+// 保存主窗口的大小和位置
+let mainWindowState = {
+  width: 1200,
+  height: 780,
+  x: undefined as number | undefined,
+  y: undefined as number | undefined,
+  isMaximized: false
+};
+
 /**
  * 初始化代理设置
  */
@@ -71,10 +80,109 @@ export function initializeWindowManager() {
     }
   });
 
+  ipcMain.on('mini-window', (event) => {
+    const win = BrowserWindow.fromWebContents(event.sender);
+    if (win) {
+      // 保存当前窗口状态
+      const [width, height] = win.getSize();
+      const [x, y] = win.getPosition();
+      mainWindowState = {
+        width,
+        height,
+        x,
+        y,
+        isMaximized: win.isMaximized()
+      };
+
+      // 获取屏幕尺寸
+      const { width: screenWidth } = screen.getPrimaryDisplay().workAreaSize;
+
+      // 设置迷你窗口的大小和位置
+      win.unmaximize();
+      win.setMinimumSize(340, 64);
+      win.setMaximumSize(340, 64);
+      win.setSize(340, 64);
+      win.setPosition(screenWidth - 340, 20);
+      win.setAlwaysOnTop(true);
+      win.setSkipTaskbar(false);
+      win.setResizable(false);
+
+      // 导航到迷你模式路由
+      win.webContents.send('navigate', '/mini');
+
+      // 发送事件到渲染进程，通知切换到迷你模式
+      win.webContents.send('mini-mode', true);
+    }
+  });
+
+  // 恢复窗口
+  ipcMain.on('restore-window', (event) => {
+    const win = BrowserWindow.fromWebContents(event.sender);
+    if (win) {
+      // 恢复窗口的大小调整功能
+      win.setResizable(true);
+      win.setMaximumSize(0, 0);
+
+      // 恢复窗口的最小尺寸限制
+      win.setMinimumSize(1200, 780);
+
+      // 恢复窗口状态
+      if (mainWindowState.isMaximized) {
+        win.maximize();
+      } else {
+        win.setSize(mainWindowState.width, mainWindowState.height);
+        if (mainWindowState.x !== undefined && mainWindowState.y !== undefined) {
+          win.setPosition(mainWindowState.x, mainWindowState.y);
+        }
+      }
+
+      win.setAlwaysOnTop(false);
+      win.setSkipTaskbar(false);
+
+      // 导航回主页面
+      win.webContents.send('navigate', '/');
+
+      // 发送事件到渲染进程，通知退出迷你模式
+      win.webContents.send('mini-mode', false);
+    }
+  });
+
   // 监听代理设置变化
   store.onDidChange('set.proxyConfig', () => {
     initializeProxy();
   });
+
+  // 监听窗口大小调整事件
+  ipcMain.on('resize-window', (event, width, height) => {
+    const win = BrowserWindow.fromWebContents(event.sender);
+    if (win) {
+      // 设置窗口的大小
+      console.log(`调整窗口大小: ${width} x ${height}`);
+      win.setSize(width, height);
+    }
+  });
+
+  // 专门用于迷你模式下调整窗口大小的事件
+  ipcMain.on('resize-mini-window', (event, showPlaylist) => {
+    const win = BrowserWindow.fromWebContents(event.sender);
+    if (win) {
+      if (showPlaylist) {
+        console.log('主进程: 扩大迷你窗口至 340 x 400');
+        // 调整最大尺寸限制，允许窗口变大
+        win.setMinimumSize(340, 64);
+        win.setMaximumSize(340, 400);
+        // 调整窗口尺寸
+        win.setSize(340, 400);
+      } else {
+        console.log('主进程: 缩小迷你窗口至 340 x 64');
+        // 强制重置尺寸限制，确保窗口可以缩小
+        win.setMaximumSize(340, 64);
+        win.setMinimumSize(340, 64);
+        // 调整窗口尺寸
+        win.setSize(340, 64);
+      }
+    }
+  });
 }
 
 /**
diff --git a/src/preload/index.d.ts b/src/preload/index.d.ts
index ec889bc..e55192a 100644
--- a/src/preload/index.d.ts
+++ b/src/preload/index.d.ts
@@ -11,7 +11,11 @@ declare global {
       close: () => void;
       dragStart: (data: string) => void;
       miniTray: () => void;
+      miniWindow: () => void;
+      restore: () => void;
       restart: () => void;
+      resizeWindow: (width: number, height: number) => void;
+      resizeMiniWindow: (showPlaylist: boolean) => void;
       unblockMusic: (id: number, data: any) => Promise<any>;
       onLyricWindowClosed: (callback: () => void) => void;
       startDownload: (url: string) => void;
diff --git a/src/preload/index.ts b/src/preload/index.ts
index 206eb55..dee5014 100644
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -8,7 +8,11 @@ const api = {
   close: () => ipcRenderer.send('close-window'),
   dragStart: (data) => ipcRenderer.send('drag-start', data),
   miniTray: () => ipcRenderer.send('mini-tray'),
+  miniWindow: () => ipcRenderer.send('mini-window'),
+  restore: () => ipcRenderer.send('restore-window'),
   restart: () => ipcRenderer.send('restart'),
+  resizeWindow: (width, height) => ipcRenderer.send('resize-window', width, height),
+  resizeMiniWindow: (showPlaylist) => ipcRenderer.send('resize-mini-window', showPlaylist),
   openLyric: () => ipcRenderer.send('open-lyric'),
   sendLyric: (data) => ipcRenderer.send('send-lyric', data),
   sendSong: (data) => ipcRenderer.send('update-current-song', data),
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index b8f272c..b50bba3 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -13,8 +13,9 @@
 <script setup lang="ts">
 import { cloneDeep } from 'lodash';
 import { darkTheme, lightTheme } from 'naive-ui';
-import { computed, nextTick, watch } from 'vue';
+import { computed, nextTick, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
 
 import homeRouter from '@/router/home';
 import { useMenuStore } from '@/store/modules/menu';
@@ -24,11 +25,13 @@ import { isElectron, isLyricWindow } from '@/utils';
 
 import { initAudioListeners } from './hooks/MusicHook';
 import { isMobile } from './utils';
+import { initShortcut } from './utils/shortcut';
 
 const { locale } = useI18n();
 const settingsStore = useSettingsStore();
 const menuStore = useMenuStore();
 const playerStore = usePlayerStore();
+const router = useRouter();
 
 // 监听语言变化
 watch(
@@ -76,8 +79,26 @@ if (!isLyricWindow.value) {
 
 handleSetLanguage(settingsStore.setData.language);
 
+// 监听迷你模式状态
 if (isElectron) {
   window.api.onLanguageChanged(handleSetLanguage);
+  window.electron.ipcRenderer.on('mini-mode', (_, value) => {
+    settingsStore.setMiniMode(value);
+    if (value) {
+      // 存储当前路由
+      localStorage.setItem('currentRoute', router.currentRoute.value.path);
+      router.push('/mini');
+    } else {
+      // 恢复当前路由
+      const currentRoute = localStorage.getItem('currentRoute');
+      if (currentRoute) {
+        router.push(currentRoute);
+        localStorage.removeItem('currentRoute');
+      } else {
+        router.push('/');
+      }
+    }
+  });
 }
 
 onMounted(async () => {
@@ -93,6 +114,8 @@ onMounted(async () => {
     initAudioListeners();
     window.api.sendSong(cloneDeep(playerStore.playMusic));
   }
+  // 初始化快捷键
+  initShortcut();
 });
 </script>
 
diff --git a/src/renderer/assets/css/base.css b/src/renderer/assets/css/base.css
index c52edbe..cfead38 100644
--- a/src/renderer/assets/css/base.css
+++ b/src/renderer/assets/css/base.css
@@ -1,5 +1,6 @@
 body {
   /* background-color: #000; */
+  overflow: hidden;
 }
 
 .n-popover:has(.music-play) {
diff --git a/src/renderer/components/lyric/LyricSettings.vue b/src/renderer/components/lyric/LyricSettings.vue
index 8b75ecc..f3c1991 100644
--- a/src/renderer/components/lyric/LyricSettings.vue
+++ b/src/renderer/components/lyric/LyricSettings.vue
@@ -27,6 +27,16 @@
         <n-switch v-model:value="config.hidePlayBar" />
       </div>
 
+      <div class="settings-item">
+        <span>{{ t('settings.lyricSettings.hideMiniPlayBar') }}</span>
+        <n-switch v-model:value="config.hideMiniPlayBar" />
+      </div>
+
+      <div class="settings-item">
+        <span>{{ t('settings.lyricSettings.hideLyrics') }}</span>
+        <n-switch v-model:value="config.hideLyrics" />
+      </div>
+
       <div class="settings-slider">
         <span>{{ t('settings.lyricSettings.fontSize') }}</span>
         <n-slider
@@ -99,7 +109,9 @@ interface LyricConfig {
   showTranslation: boolean;
   theme: 'default' | 'light' | 'dark';
   hidePlayBar: boolean;
+  hideMiniPlayBar: boolean;
   pureModeEnabled: boolean;
+  hideLyrics: boolean;
 }
 
 const config = ref<LyricConfig>({
@@ -111,7 +123,9 @@ const config = ref<LyricConfig>({
   showTranslation: true,
   theme: 'default',
   hidePlayBar: false,
-  pureModeEnabled: false
+  hideMiniPlayBar: false,
+  pureModeEnabled: false,
+  hideLyrics: false
 });
 
 const emit = defineEmits(['themeChange']);
diff --git a/src/renderer/components/player/MiniPlayBar.vue b/src/renderer/components/player/MiniPlayBar.vue
new file mode 100644
index 0000000..73747b4
--- /dev/null
+++ b/src/renderer/components/player/MiniPlayBar.vue
@@ -0,0 +1,591 @@
+<template>
+  <div
+    class="mini-play-bar"
+    :class="{ 'pure-mode': pureModeEnabled, 'mini-mode': settingsStore.isMiniMode }"
+  >
+    <div class="mini-bar-container">
+      <!-- 专辑封面 -->
+      <div class="album-cover" @click="setMusicFull">
+        <n-image
+          :src="getImgUrl(playMusic?.picUrl, '100y100')"
+          fallback-src="/placeholder.png"
+          class="cover-img"
+          preview-disabled
+        />
+      </div>
+
+      <!-- 歌曲信息 -->
+      <div class="song-info" @click="setMusicFull">
+        <div class="song-title">{{ playMusic?.name || '未播放' }}</div>
+        <div class="song-artist">
+          <span
+            v-for="(artists, artistsindex) in artistList"
+            :key="artistsindex"
+            class="cursor-pointer hover:text-green-500"
+            @click.stop="handleArtistClick(artists.id)"
+          >
+            {{ artists.name }}{{ artistsindex < artistList.length - 1 ? ' / ' : '' }}
+          </span>
+        </div>
+      </div>
+
+      <!-- 控制按钮区域 -->
+      <div class="control-buttons">
+        <button class="control-button previous" @click="handlePrev">
+          <i class="iconfont icon-prev"></i>
+        </button>
+        <button class="control-button play" @click="playMusicEvent">
+          <i class="iconfont" :class="play ? 'icon-stop' : 'icon-play'"></i>
+        </button>
+        <button class="control-button next" @click="handleNext">
+          <i class="iconfont icon-next"></i>
+        </button>
+      </div>
+
+      <!-- 右侧功能按钮 -->
+      <div class="function-buttons">
+        <button class="function-button">
+          <i
+            class="iconfont icon-likefill"
+            :class="{ 'like-active': isFavorite }"
+            @click="toggleFavorite"
+          ></i>
+        </button>
+
+        <n-popover trigger="click" :z-index="99999999" placement="top" :show-arrow="false">
+          <template #trigger>
+            <button class="function-button" @click="mute">
+              <i class="iconfont" :class="getVolumeIcon"></i>
+            </button>
+          </template>
+          <div class="volume-slider-wrapper">
+            <n-slider
+              v-model:value="volumeSlider"
+              :step="0.01"
+              :tooltip="false"
+              vertical
+            ></n-slider>
+          </div>
+        </n-popover>
+
+        <!-- 播放列表按钮 -->
+        <button class="function-button" @click="togglePlaylist">
+          <i class="iconfont icon-list"></i>
+        </button>
+      </div>
+
+      <!-- 关闭按钮 -->
+      <button class="close-button" @click="handleClose">
+        <i class="iconfont ri-close-line"></i>
+      </button>
+    </div>
+
+    <!-- 进度条 -->
+    <div
+      class="progress-bar"
+      @click="handleProgressClick"
+      @mousemove="handleProgressHover"
+      @mouseleave="handleProgressLeave"
+    >
+      <div class="progress-track"></div>
+      <div class="progress-fill" :style="{ width: `${(nowTime / allTime) * 100}%` }"></div>
+    </div>
+
+    <!-- 播放列表 - 单独放在外层，不再使用 popover -->
+    <div
+      v-show="isPlaylistOpen"
+      class="playlist-container"
+      :class="{ 'mini-mode-list': settingsStore.isMiniMode }"
+    >
+      <n-scrollbar ref="palyListRef" class="playlist-scrollbar">
+        <div class="playlist-items">
+          <div v-for="item in playList" :key="item.id" 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>
+        </div>
+      </n-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, provide, ref, useTemplateRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import SongItem from '@/components/common/SongItem.vue';
+import { allTime, artistList, nowTime, playMusic } from '@/hooks/MusicHook';
+import { useArtist } from '@/hooks/useArtist';
+import { audioService } from '@/services/audioService';
+import { usePlayerStore, useSettingsStore } from '@/store';
+import type { SongResult } from '@/type/music';
+import { getImgUrl } from '@/utils';
+
+const playerStore = usePlayerStore();
+const settingsStore = useSettingsStore();
+const { t } = useI18n();
+const { navigateToArtist } = useArtist();
+
+withDefaults(
+  defineProps<{
+    pureModeEnabled?: boolean;
+    showInfo?: boolean;
+  }>(),
+  {
+    showInfo: false
+  }
+);
+
+// 处理关闭按钮点击
+const handleClose = () => {
+  if (settingsStore.isMiniMode) {
+    window.api.restore();
+  } else {
+    window.api.close();
+  }
+};
+
+// 是否播放
+const play = computed(() => playerStore.play as boolean);
+// 播放列表
+const playList = computed(() => playerStore.playList as SongResult[]);
+
+// 音量控制
+const audioVolume = ref(
+  localStorage.getItem('volume') ? parseFloat(localStorage.getItem('volume') as string) : 1
+);
+
+const volumeSlider = computed({
+  get: () => audioVolume.value * 100,
+  set: (value) => {
+    localStorage.setItem('volume', (value / 100).toString());
+    audioService.setVolume(value / 100);
+    audioVolume.value = value / 100;
+  }
+});
+
+// 音量图标
+const getVolumeIcon = computed(() => {
+  if (audioVolume.value === 0) return 'ri-volume-mute-line';
+  if (audioVolume.value <= 0.5) return 'ri-volume-down-line';
+  return 'ri-volume-up-line';
+});
+
+// 静音
+const mute = () => {
+  if (volumeSlider.value === 0) {
+    volumeSlider.value = 30;
+  } else {
+    volumeSlider.value = 0;
+  }
+};
+
+// 收藏相关
+const isFavorite = computed(() => {
+  const numericId =
+    typeof playMusic.value.id === 'string' ? parseInt(playMusic.value.id, 10) : playMusic.value.id;
+  return playerStore.favoriteList.includes(numericId);
+});
+
+const toggleFavorite = async (e: Event) => {
+  e.stopPropagation();
+  const numericId =
+    typeof playMusic.value.id === 'string' ? parseInt(playMusic.value.id, 10) : playMusic.value.id;
+
+  if (isFavorite.value) {
+    playerStore.removeFromFavorite(numericId);
+  } else {
+    playerStore.addToFavorite(numericId);
+  }
+};
+
+// 播放列表相关
+const palyListRef = useTemplateRef('palyListRef') as any;
+const isPlaylistOpen = ref(false);
+
+// 提供 openPlaylistDrawer 给子组件
+provide('openPlaylistDrawer', (songId: number) => {
+  console.log('打开歌单抽屉', songId);
+  // 由于在迷你模式不处理这个功能，所以只记录日志
+});
+
+// 切换播放列表显示/隐藏
+const togglePlaylist = () => {
+  isPlaylistOpen.value = !isPlaylistOpen.value;
+  console.log('切换播放列表状态', isPlaylistOpen.value);
+
+  // 调整窗口大小
+  if (settingsStore.isMiniMode) {
+    try {
+      if (isPlaylistOpen.value) {
+        // 打开播放列表时调整DOM
+        document.body.style.height = 'auto';
+        document.body.style.overflow = 'visible';
+
+        // 使用新的专用 API 调整窗口大小
+        if (window.api && typeof window.api.resizeMiniWindow === 'function') {
+          window.api.resizeMiniWindow(true);
+        }
+      } else {
+        // 关闭播放列表时强制调整DOM
+        document.body.style.height = '64px';
+        document.body.style.overflow = 'hidden';
+
+        // 使用新的专用 API 调整窗口大小
+        if (window.api && typeof window.api.resizeMiniWindow === 'function') {
+          window.api.resizeMiniWindow(false);
+        }
+      }
+    } catch (error) {
+      console.error('调整窗口大小失败:', error);
+    }
+  }
+
+  // 如果打开列表，滚动到当前播放歌曲
+  if (isPlaylistOpen.value) {
+    scrollToPlayList();
+  }
+};
+
+const scrollToPlayList = () => {
+  setTimeout(() => {
+    const currentIndex = playerStore.playListIndex;
+    const itemHeight = 52; // 每个列表项的高度
+    palyListRef.value?.scrollTo({
+      top: currentIndex * itemHeight,
+      behavior: 'smooth'
+    });
+  }, 50);
+};
+
+const handleDeleteSong = (song: SongResult) => {
+  if (song.id === playMusic.value.id) {
+    playerStore.nextPlay();
+  }
+  playerStore.removeFromPlayList(song.id as number);
+};
+
+// 艺术家点击
+const handleArtistClick = (id: number) => {
+  navigateToArtist(id);
+};
+
+// 进度条相关
+const handleProgressClick = (e: MouseEvent) => {
+  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+  const percent = (e.clientX - rect.left) / rect.width;
+  audioService.seek(allTime.value * percent);
+  nowTime.value = allTime.value * percent;
+};
+
+const hoverTime = ref(0);
+const isHovering = ref(false);
+
+const handleProgressHover = (e: MouseEvent) => {
+  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+  const percent = (e.clientX - rect.left) / rect.width;
+  hoverTime.value = allTime.value * percent;
+  isHovering.value = true;
+};
+
+const handleProgressLeave = () => {
+  isHovering.value = false;
+};
+
+// 播放控制
+const handlePrev = () => playerStore.prevPlay();
+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);
+    }
+  } catch (error) {
+    console.error('播放出错:', error);
+    playerStore.nextPlay();
+  }
+};
+
+// 切换到完整播放器
+const setMusicFull = () => {
+  playerStore.setMusicFull(true);
+};
+</script>
+
+<style lang="scss" scoped>
+.mini-play-bar {
+  @apply w-full flex flex-col bg-white dark:bg-dark-200 shadow-md bg-opacity-50 backdrop-blur dark:bg-opacity-50;
+  height: 64px;
+  border-radius: 8px;
+  position: relative;
+
+  &.mini-mode {
+    @apply shadow-lg;
+    -webkit-app-region: drag;
+
+    .mini-bar-container {
+      @apply px-2;
+    }
+
+    .song-info {
+      width: 120px;
+
+      .song-title {
+        @apply text-xs font-medium;
+      }
+
+      .song-artist {
+        @apply text-xs opacity-50;
+      }
+    }
+
+    .function-buttons {
+      -webkit-app-region: no-drag;
+      @apply space-x-1 ml-1;
+
+      .function-button {
+        width: 28px;
+        height: 28px;
+
+        .iconfont {
+          @apply text-base;
+        }
+      }
+    }
+
+    .control-buttons {
+      @apply mx-1 space-x-0.5;
+      -webkit-app-region: no-drag;
+      .control-button {
+        width: 28px;
+        height: 28px;
+
+        .iconfont {
+          @apply text-base;
+        }
+      }
+    }
+
+    .close-button {
+      -webkit-app-region: no-drag;
+      width: 28px;
+      height: 28px;
+    }
+
+    .album-cover {
+      @apply flex-shrink-0 mr-2;
+      width: 36px;
+      height: 36px;
+      -webkit-app-region: no-drag;
+    }
+
+    .progress-bar {
+      height: 2px !important;
+
+      &:hover {
+        height: 3px !important;
+
+        .progress-track,
+        .progress-fill {
+          height: 3px !important;
+        }
+      }
+    }
+  }
+}
+
+.mini-bar-container {
+  @apply flex items-center px-3 h-full relative;
+}
+
+.album-cover {
+  @apply flex-shrink-0 mr-3 cursor-pointer;
+  width: 40px;
+  height: 40px;
+
+  .cover-img {
+    @apply w-full h-full rounded-md object-cover;
+  }
+}
+
+.song-info {
+  @apply flex flex-col justify-center min-w-0 flex-shrink mr-4 cursor-pointer;
+  width: 200px;
+
+  .song-title {
+    @apply text-sm font-medium truncate;
+    color: var(--text-color-1, #000);
+  }
+
+  .song-artist {
+    @apply text-xs truncate mt-0.5 opacity-60;
+    color: var(--text-color-2, #666);
+  }
+}
+
+.control-buttons {
+  @apply flex items-center space-x-1 mx-4;
+}
+
+.control-button {
+  @apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer text-gray-400;
+  width: 32px;
+  height: 32px;
+
+  &:hover {
+    @apply bg-gray-100 dark:bg-dark-300;
+  }
+
+  &.play {
+    @apply bg-primary text-white;
+    &:hover {
+      @apply bg-green-800;
+    }
+  }
+
+  .iconfont {
+    @apply text-lg;
+  }
+}
+
+.function-buttons {
+  @apply flex items-center ml-auto space-x-2;
+}
+
+.function-button {
+  @apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer;
+  width: 32px;
+  height: 32px;
+  color: var(--text-color-2, #666);
+
+  &:hover {
+    @apply bg-gray-100 dark:bg-dark-300;
+    color: var(--text-color-1, #000);
+  }
+
+  .iconfont {
+    @apply text-lg;
+  }
+}
+
+.close-button {
+  @apply flex items-center justify-center rounded-full transition-all duration-200 border-0 bg-transparent cursor-pointer ml-2;
+  width: 32px;
+  height: 32px;
+  color: var(--text-color-2, #666);
+
+  &:hover {
+    @apply bg-gray-100 dark:bg-dark-300;
+    color: var(--text-color-1, #000);
+  }
+}
+
+.progress-bar {
+  @apply relative w-full cursor-pointer;
+  height: 2px;
+
+  &:hover {
+    height: 4px;
+
+    .progress-track,
+    .progress-fill {
+      height: 4px;
+    }
+  }
+}
+
+.progress-track {
+  @apply absolute inset-x-0 bottom-0 transition-all duration-200;
+  height: 2px;
+  background: rgba(0, 0, 0, 0.1);
+
+  .dark & {
+    background: rgba(255, 255, 255, 0.15);
+  }
+}
+
+.progress-fill {
+  @apply absolute bottom-0 left-0 transition-all duration-200;
+  height: 2px;
+  background: var(--primary-color, #18a058);
+}
+
+.like-active {
+  @apply text-red-500 hover:text-red-600 !important;
+}
+
+.volume-slider-wrapper {
+  @apply p-4 rounded-xl bg-white dark:bg-dark-100 shadow-lg;
+  width: 40px;
+  height: 160px;
+}
+
+// 播放列表样式
+.playlist-container {
+  @apply fixed left-0 right-0 bg-white dark:bg-dark-100 overflow-hidden;
+  top: 64px;
+  height: 330px;
+  max-height: 330px;
+
+  &.mini-mode-list {
+    width: 340px;
+    @apply bg-opacity-90 dark:bg-opacity-90;
+  }
+}
+
+// 播放列表内容样式
+.music-play-list-content {
+  @apply px-2 py-1;
+
+  .delete-btn {
+    @apply p-2 rounded-full transition-colors duration-200 cursor-pointer;
+    @apply hover:bg-red-50 dark:hover:bg-red-900/20;
+
+    .iconfont {
+      @apply text-lg;
+    }
+  }
+}
+
+// 过渡动画
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.playlist-scrollbar {
+  height: 100%;
+}
+
+.playlist-items {
+  padding: 4px 0;
+}
+</style>
diff --git a/src/renderer/layout/components/MobilePlayBar.vue b/src/renderer/components/player/MobilePlayBar.vue
similarity index 100%
rename from src/renderer/layout/components/MobilePlayBar.vue
rename to src/renderer/components/player/MobilePlayBar.vue
diff --git a/src/renderer/layout/components/PlayBar.vue b/src/renderer/components/player/PlayBar.vue
similarity index 90%
rename from src/renderer/layout/components/PlayBar.vue
rename to src/renderer/components/player/PlayBar.vue
index a26f28f..faa8782 100644
--- a/src/renderer/layout/components/PlayBar.vue
+++ b/src/renderer/components/player/PlayBar.vue
@@ -204,14 +204,12 @@ import {
   textColors
 } from '@/hooks/MusicHook';
 import { useArtist } from '@/hooks/useArtist';
+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';
 import { getImgUrl, isElectron, isMobile, secondToMinute, setAnimationClass } from '@/utils';
-import { showShortcutToast } from '@/utils/shortcutToast';
-
-import MusicFull from './MusicFull.vue';
 
 const playerStore = usePlayerStore();
 const settingsStore = useSettingsStore();
@@ -449,60 +447,6 @@ const handleArtistClick = (id: number) => {
   navigateToArtist(id);
 };
 
-// 添加全局快捷键处理
-if (isElectron) {
-  window.electron.ipcRenderer.on('global-shortcut', (_, action: string) => {
-    console.log('action', action);
-    switch (action) {
-      case 'togglePlay':
-        playMusicEvent();
-        showShortcutToast(
-          play.value ? t('player.playBar.play') : t('player.playBar.pause'),
-          play.value ? 'ri-pause-circle-line' : 'ri-play-circle-line'
-        );
-        break;
-      case 'prevPlay':
-        handlePrev();
-        showShortcutToast(t('player.playBar.prev'), 'ri-skip-back-line');
-        break;
-      case 'nextPlay':
-        handleNext();
-        showShortcutToast(t('player.playBar.next'), 'ri-skip-forward-line');
-        break;
-      case 'volumeUp':
-        if (volumeSlider.value < 100) {
-          volumeSlider.value = Math.min(volumeSlider.value + 10, 100);
-          showShortcutToast(
-            `${t('player.playBar.volume')}${volumeSlider.value}%`,
-            'ri-volume-up-line'
-          );
-        }
-        break;
-      case 'volumeDown':
-        if (volumeSlider.value > 0) {
-          volumeSlider.value = Math.max(volumeSlider.value - 10, 0);
-          showShortcutToast(
-            `${t('player.playBar.volume')}${volumeSlider.value}%`,
-            'ri-volume-down-line'
-          );
-        }
-        break;
-      case 'toggleFavorite':
-        toggleFavorite(new Event('click'));
-        showShortcutToast(
-          isFavorite.value
-            ? t('player.playBar.favorite', { name: playMusic.value.name })
-            : t('player.playBar.unFavorite', { name: playMusic.value.name }),
-          isFavorite.value ? 'ri-heart-fill' : 'ri-heart-line'
-        );
-        break;
-      default:
-        console.log('未知的快捷键动作:', action);
-        break;
-    }
-  });
-}
-
 // 监听播放栏显示状态
 watch(
   () => MusicFullRef.value?.config?.hidePlayBar,
diff --git a/src/renderer/hooks/MusicHook.ts b/src/renderer/hooks/MusicHook.ts
index 460e66b..5180025 100644
--- a/src/renderer/hooks/MusicHook.ts
+++ b/src/renderer/hooks/MusicHook.ts
@@ -535,7 +535,7 @@ export const pause = () => {
         );
       }
 
-      currentSound.pause();
+      audioService.pause();
     } catch (error) {
       console.error('暂停播放出错:', error);
     }
diff --git a/src/renderer/layout/AppLayout.vue b/src/renderer/layout/AppLayout.vue
index cb3727c..38edc7e 100644
--- a/src/renderer/layout/AppLayout.vue
+++ b/src/renderer/layout/AppLayout.vue
@@ -25,16 +25,18 @@
         </div>
       </div>
       <!-- 底部音乐播放 -->
-      <play-bar
-        v-if="!isMobile"
-        v-show="isPlay"
-        :style="playerStore.musicFull ? 'bottom: 0;' : ''"
-      />
-      <mobile-play-bar
-        v-else
-        v-show="isPlay"
-        :style="isMobile && playerStore.musicFull ? 'bottom: 0;' : ''"
-      />
+      <template v-if="!settingsStore.isMiniMode">
+        <play-bar
+          v-if="!isMobile"
+          v-show="isPlay"
+          :style="playerStore.musicFull ? 'bottom: 0;' : ''"
+        />
+        <mobile-play-bar
+          v-else
+          v-show="isPlay"
+          :style="isMobile && playerStore.musicFull ? 'bottom: 0;' : ''"
+        />
+      </template>
       <!-- 下载管理抽屉 -->
       <download-drawer
         v-if="
@@ -76,8 +78,8 @@ const keepAliveInclude = computed(() =>
 );
 
 const AppMenu = defineAsyncComponent(() => import('./components/AppMenu.vue'));
-const PlayBar = defineAsyncComponent(() => import('./components/PlayBar.vue'));
-const MobilePlayBar = defineAsyncComponent(() => import('./components/MobilePlayBar.vue'));
+const PlayBar = defineAsyncComponent(() => import('@/components/player/PlayBar.vue'));
+const MobilePlayBar = defineAsyncComponent(() => import('@/components/player/MobilePlayBar.vue'));
 const SearchBar = defineAsyncComponent(() => import('./components/SearchBar.vue'));
 const TitleBar = defineAsyncComponent(() => import('./components/TitleBar.vue'));
 
diff --git a/src/renderer/layout/MiniLayout.vue b/src/renderer/layout/MiniLayout.vue
new file mode 100644
index 0000000..05c83c4
--- /dev/null
+++ b/src/renderer/layout/MiniLayout.vue
@@ -0,0 +1,16 @@
+<!-- 迷你模式布局 -->
+<template>
+  <div class="mini-layout">
+    <mini-play-bar />
+  </div>
+</template>
+
+<script setup lang="ts">
+import MiniPlayBar from '@/components/player/MiniPlayBar.vue';
+</script>
+
+<style lang="scss" scoped>
+.mini-layout {
+  @apply w-full h-full bg-transparent;
+}
+</style>
diff --git a/src/renderer/layout/components/MusicFull.vue b/src/renderer/layout/components/MusicFull.vue
index b4ff89a..0ac8da4 100644
--- a/src/renderer/layout/components/MusicFull.vue
+++ b/src/renderer/layout/components/MusicFull.vue
@@ -29,8 +29,8 @@
       </n-popover>
 
       <div
-        v-show="!config.hideCover"
         class="music-img"
+        :class="{ 'only-cover': config.hideLyrics }"
         :style="{ color: textColors.theme === 'dark' ? '#000000' : '#ffffff' }"
       >
         <n-image
@@ -40,7 +40,7 @@
           lazy
           preview-disabled
         />
-        <div>
+        <div class="music-info">
           <div class="music-content-name">{{ playMusic.name }}</div>
           <div class="music-content-singer">
             <n-ellipsis
@@ -62,9 +62,21 @@
               </span>
             </n-ellipsis>
           </div>
+          <mini-play-bar
+            v-if="!config.hideMiniPlayBar"
+            class="mt-4"
+            :pure-mode-enabled="config.pureModeEnabled"
+          />
         </div>
       </div>
-      <div class="music-content" :class="{ center: config.centerLyrics && config.hideCover }">
+
+      <div
+        class="music-content"
+        :class="{
+          center: config.centerLyrics && config.hideCover,
+          hide: config.hideLyrics
+        }"
+      >
         <n-layout
           ref="lrcSider"
           class="music-lrc"
@@ -133,6 +145,7 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import LyricSettings from '@/components/lyric/LyricSettings.vue';
+import MiniPlayBar from '@/components/player/MiniPlayBar.vue';
 import {
   artistList,
   lrcArray,
@@ -169,6 +182,8 @@ interface LyricConfig {
   theme: 'default' | 'light' | 'dark';
   hidePlayBar: boolean;
   pureModeEnabled: boolean;
+  hideMiniPlayBar: boolean;
+  hideLyrics: boolean;
 }
 
 // 移除 computed 配置
@@ -181,7 +196,9 @@ const config = ref<LyricConfig>({
   showTranslation: true,
   theme: 'default',
   hidePlayBar: false,
-  pureModeEnabled: false
+  pureModeEnabled: false,
+  hideMiniPlayBar: false,
+  hideLyrics: false
 });
 
 // 监听设置组件的配置变化
@@ -545,17 +562,58 @@ defineExpose({
   animation-duration: 300ms;
 
   .music-img {
-    @apply flex-1 flex justify-center mr-16 flex-col;
+    @apply flex-1 flex justify-center mr-16 flex-col items-center;
     max-width: 360px;
     max-height: 360px;
+    transition: all 0.3s ease;
+
+    &.only-cover {
+      @apply mr-0 flex-initial;
+      max-width: none;
+      max-height: none;
+
+      .img {
+        @apply w-[50vh] h-[50vh] mb-8;
+      }
+
+      .music-info {
+        @apply text-center w-[600px];
+
+        .music-content-name {
+          @apply text-4xl mb-4;
+          color: var(--text-color-active);
+        }
+
+        .music-content-singer {
+          @apply text-xl mb-8 opacity-80;
+          color: var(--text-color-primary);
+        }
+      }
+    }
+
     .img {
-      @apply rounded-xl w-full h-full shadow-2xl;
+      @apply rounded-xl w-full h-full shadow-2xl transition-all duration-300;
+    }
+
+    .music-info {
+      @apply w-full mt-4;
+
+      .music-content-name {
+        @apply text-2xl font-bold;
+        color: var(--text-color-active);
+      }
+
+      .music-content-singer {
+        @apply text-base mt-2 opacity-80;
+        color: var(--text-color-primary);
+      }
     }
   }
 
   .music-content {
     @apply flex flex-col justify-center items-center relative;
     width: 500px;
+    transition: all 0.3s ease;
 
     &.center {
       @apply w-full;
@@ -567,12 +625,8 @@ defineExpose({
       }
     }
 
-    &-name {
-      @apply font-bold text-2xl pb-1 pt-4;
-    }
-
-    &-singer {
-      @apply text-base;
+    &.hide {
+      @apply hidden;
     }
   }
 
diff --git a/src/renderer/layout/components/TitleBar.vue b/src/renderer/layout/components/TitleBar.vue
index 0316bba..7ca64b0 100644
--- a/src/renderer/layout/components/TitleBar.vue
+++ b/src/renderer/layout/components/TitleBar.vue
@@ -14,6 +14,9 @@
         下载桌面版
       </n-button>
       <template v-if="isElectron">
+        <div class="button" @click="miniWindow">
+          <i class="iconfont ri-picture-in-picture-line"></i>
+        </div>
         <div class="button" @click="minimize">
           <i class="iconfont icon-minisize"></i>
         </div>
@@ -78,6 +81,11 @@ const minimize = () => {
   window.api.minimize();
 };
 
+const miniWindow = () => {
+  if (!isElectron) return;
+  window.api.miniWindow();
+};
+
 const handleAction = (action: 'minimize' | 'close') => {
   if (rememberChoice.value) {
     settingsStore.setSetData({
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index a82c2e7..fc98ac7 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -1,8 +1,20 @@
 import { createRouter, createWebHashHistory } from 'vue-router';
 
 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';
+
+// 由于 Vue Router 守卫在创建前不能直接使用组合式 API
+// 我们创建一个辅助函数来获取 store 实例
+let _settingsStore: ReturnType<typeof useSettingsStore> | null = null;
+const getSettingsStore = () => {
+  if (!_settingsStore) {
+    _settingsStore = useSettingsStore();
+  }
+  return _settingsStore;
+};
 
 const loginRouter = {
   path: '/login',
@@ -35,10 +47,37 @@ const routes = [
   {
     path: '/lyric',
     component: () => import('@/views/lyric/index.vue')
+  },
+  {
+    path: '/mini',
+    component: MiniLayout
   }
 ];
 
-export default createRouter({
+const router = createRouter({
   routes,
   history: createWebHashHistory()
 });
+
+// 添加全局前置守卫
+router.beforeEach((to, from, next) => {
+  const settingsStore = getSettingsStore();
+
+  // 如果是迷你模式
+  if (settingsStore.isMiniMode) {
+    // 只允许访问 /mini 路由
+    if (to.path === '/mini') {
+      next();
+    } else {
+      next(false); // 阻止导航
+    }
+  } else if (to.path === '/mini') {
+    // 如果不是迷你模式但想访问 /mini 路由，重定向到首页
+    next('/');
+  } else {
+    // 其他情况正常导航
+    next();
+  }
+});
+
+export default router;
diff --git a/src/renderer/store/modules/settings.ts b/src/renderer/store/modules/settings.ts
index 0db08f5..58f0c10 100644
--- a/src/renderer/store/modules/settings.ts
+++ b/src/renderer/store/modules/settings.ts
@@ -20,6 +20,7 @@ export const useSettingsStore = defineStore('settings', () => {
   const setData = ref(getInitialSettings());
   const theme = ref<ThemeType>(getCurrentTheme());
   const isMobile = ref(false);
+  const isMiniMode = ref(false);
   const showUpdateModal = ref(false);
   const showArtistDrawer = ref(false);
   const currentArtistId = ref<number | null>(null);
@@ -48,6 +49,10 @@ export const useSettingsStore = defineStore('settings', () => {
     applyTheme(theme.value);
   };
 
+  const setMiniMode = (value: boolean) => {
+    isMiniMode.value = value;
+  };
+
   const setShowUpdateModal = (value: boolean) => {
     showUpdateModal.value = value;
   };
@@ -109,6 +114,7 @@ export const useSettingsStore = defineStore('settings', () => {
     setData,
     theme,
     isMobile,
+    isMiniMode,
     showUpdateModal,
     showArtistDrawer,
     currentArtistId,
@@ -116,6 +122,7 @@ export const useSettingsStore = defineStore('settings', () => {
     showDownloadDrawer,
     setSetData,
     toggleTheme,
+    setMiniMode,
     setShowUpdateModal,
     setShowArtistDrawer,
     setCurrentArtistId,
diff --git a/src/renderer/utils/shortcut.ts b/src/renderer/utils/shortcut.ts
new file mode 100644
index 0000000..99f8ba1
--- /dev/null
+++ b/src/renderer/utils/shortcut.ts
@@ -0,0 +1,81 @@
+import i18n from '@/../i18n/renderer';
+import { audioService } from '@/services/audioService';
+import { usePlayerStore, useSettingsStore } from '@/store';
+
+import { isElectron } from '.';
+import { showShortcutToast } from './shortcutToast';
+
+const { t } = i18n.global;
+
+export function initShortcut() {
+  if (isElectron) {
+    window.electron.ipcRenderer.on('global-shortcut', async (_, action: string) => {
+      const playerStore = usePlayerStore();
+      const settingsStore = useSettingsStore();
+
+      const currentSound = audioService.getCurrentSound();
+      const showToast = (message: string, iconName: string) => {
+        if (settingsStore.isMiniMode) {
+          return;
+        }
+        showShortcutToast(message, iconName);
+      };
+      switch (action) {
+        case 'togglePlay':
+          if (playerStore.play) {
+            await audioService.pause();
+            showToast(t('player.playBar.pause'), 'ri-pause-circle-line');
+          } else {
+            await audioService.play();
+            showToast(t('player.playBar.play'), 'ri-play-circle-line');
+          }
+          break;
+        case 'prevPlay':
+          playerStore.prevPlay();
+          showToast(t('player.playBar.prev'), 'ri-skip-back-line');
+          break;
+        case 'nextPlay':
+          playerStore.nextPlay();
+          showToast(t('player.playBar.next'), 'ri-skip-forward-line');
+          break;
+        case 'volumeUp':
+          if (currentSound && currentSound?.volume() < 1) {
+            currentSound?.volume((currentSound?.volume() || 0) + 0.1);
+            showToast(
+              `${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
+              'ri-volume-up-line'
+            );
+          }
+          break;
+        case 'volumeDown':
+          if (currentSound && currentSound?.volume() > 0) {
+            currentSound?.volume((currentSound?.volume() || 0) - 0.1);
+            showToast(
+              `${t('player.playBar.volume')}${Math.round((currentSound?.volume() || 0) * 100)}%`,
+              'ri-volume-down-line'
+            );
+          }
+          break;
+        case 'toggleFavorite': {
+          const isFavorite = playerStore.favoriteList.includes(Number(playerStore.playMusic.id));
+          const numericId = Number(playerStore.playMusic.id);
+          if (isFavorite) {
+            playerStore.removeFromFavorite(numericId);
+          } else {
+            playerStore.addToFavorite(numericId);
+          }
+          showToast(
+            isFavorite
+              ? t('player.playBar.favorite', { name: playerStore.playMusic.name })
+              : t('player.playBar.unFavorite', { name: playerStore.playMusic.name }),
+            isFavorite ? 'ri-heart-fill' : 'ri-heart-line'
+          );
+          break;
+        }
+        default:
+          console.log('未知的快捷键动作:', action);
+          break;
+      }
+    });
+  }
+}