Merge pull request #685 from apoint123/refactor/split-playback-mode-button

🦄 refactor: 拆分单个播放模式按钮为两个

Author: imsyy

auto-eslint.mjs

@@ -96,11 +96,11 @@ export default {
     "refAutoReset": true,
     "refDebounced": true,
     "refDefault": true,
+    "refManualReset": true,
     "refThrottled": true,
     "refWithControl": true,
     "resolveComponent": true,
     "resolveRef": true,
-    "resolveUnref": true,
     "shallowReactive": true,
     "shallowReadonly": true,
     "shallowRef": true,

electron.vite.config.ts

@@ -1,11 +1,11 @@
-import { resolve } from "path";
-import { MainEnv } from "./env";
-import { defineConfig, loadEnv } from "electron-vite";
-import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
 import vue from "@vitejs/plugin-vue";
+import { defineConfig, loadEnv } from "electron-vite";
+import { resolve } from "path";
 import AutoImport from "unplugin-auto-import/vite";
+import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
 import Components from "unplugin-vue-components/vite";
 import viteCompression from "vite-plugin-compression";
+import { MainEnv } from "./env";
 // import VueDevTools from "vite-plugin-vue-devtools";
 import wasm from "vite-plugin-wasm";
 
@@ -70,6 +70,7 @@ export default defineConfig(({ mode }) => {
         alias: {
           "@": resolve(__dirname, "src/"),
           "@native": resolve(__dirname, "native/smtc-for-splayer"),
+          "@shared": resolve(__dirname, "src/types/shared.ts"),
         },
       },
       css: {

electron/main/ipc/ipc-smtc.ts

@@ -1,8 +1,8 @@
-import { ipcMain, BrowserWindow, app } from "electron";
+import { BrowserWindow, app, ipcMain } from "electron";
 import { join } from "path";
-import { loadNativeModule } from "../utils/native-loader";
-import { processLog } from "../logger";
 import { IpcChannelMap } from "../../../src/types/global";
+import { processLog } from "../logger";
+import { loadNativeModule } from "../utils/native-loader";
 
 type NativeSmtcModule = typeof import("@native");
 type DiscordRpcModule = typeof import("@discord-rpc");

electron/main/ipc/ipc-tray.ts

@@ -1,7 +1,8 @@
+import { PlayModePayload } from "@shared";
 import { ipcMain } from "electron";
 import { getMainTray } from "../tray";
-import lyricWindow from "../windows/lyric-window";
 import { appName } from "../utils/config";
+import lyricWindow from "../windows/lyric-window";
 
 /**
  * 托盘 IPC
@@ -27,8 +28,8 @@ const initTrayIpc = (): void => {
   });
 
   // 播放模式切换
-  ipcMain.on("play-mode-change", (_, mode) => {
-    tray?.setPlayMode(mode);
+  ipcMain.on("play-mode-change", (_, data: PlayModePayload) => {
+    tray?.setPlayMode(data.repeatMode, data.shuffleMode);
   });
 
   // 喜欢状态切换

electron/main/tray/index.ts

@@ -1,24 +1,26 @@
+import { RepeatModeType, ShuffleModeType } from "@shared";
 import {
   app,
-  Tray,
+  BrowserWindow,
   Menu,
   MenuItemConstructorOptions,
-  BrowserWindow,
   nativeImage,
   nativeTheme,
+  Tray,
 } from "electron";
-import { isWin, appName } from "../utils/config";
 import { join } from "path";
 import { trayLog } from "../logger";
 import { useStore } from "../store";
+import { appName, isWin } from "../utils/config";
 import lyricWindow from "../windows/lyric-window";
 
 // 播放模式
-type PlayMode = "repeat" | "repeat-once" | "shuffle";
 type PlayState = "play" | "pause" | "loading";
 
+let repeatMode: RepeatModeType = "list";
+let shuffleMode: ShuffleModeType = "off";
+
 // 全局数据
-let playMode: PlayMode = "repeat";
 let playState: PlayState = "pause";
 let playName: string = "未播放歌曲";
 let likeSong: boolean = false;
@@ -27,7 +29,7 @@ let desktopLyricLock: boolean = false;
 
 export interface MainTray {
   setTitle(title: string): void;
-  setPlayMode(mode: PlayMode): void;
+  setPlayMode(repeat: RepeatModeType, shuffle: ShuffleModeType): void;
   setLikeState(like: boolean): void;
   setPlayState(state: PlayState): void;
   setPlayName(name: string): void;
@@ -58,6 +60,22 @@ const createTrayMenu = (win: BrowserWindow): MenuItemConstructorOptions[] => {
       height: 16,
     });
   };
+  /**
+   * 获取 {@linkcode RepeatModeType} 对应的显示字符串
+   * @param mode 重复模式
+   * @returns 对应的显示字符串
+   */
+  const getRepeatLabel = (mode: RepeatModeType): string => {
+    switch (mode) {
+      case "one":
+        return "单曲循环";
+      case "off":
+        return "不循环";
+      case "list":
+      default:
+        return "列表循环";
+    }
+  };
   // 菜单
   const menu: MenuItemConstructorOptions[] = [
     {
@@ -79,34 +97,38 @@ const createTrayMenu = (win: BrowserWindow): MenuItemConstructorOptions[] => {
       click: () => win.webContents.send("toggle-like-song"),
     },
     {
-      id: "changeMode",
-      label:
-        playMode === "repeat" ? "列表循环" : playMode === "repeat-once" ? "单曲循环" : "随机播放",
-      icon: showIcon(playMode),
+      id: "shuffle",
+      label: shuffleMode === "heartbeat" ? "心动模式" : "随机播放",
+      icon: showIcon("shuffle"),
+      type: "checkbox",
+      checked: shuffleMode !== "off",
+      click: () => win.webContents.send("toggleShuffle"),
+    },
+    {
+      id: "repeatMode",
+      label: getRepeatLabel(repeatMode),
+      icon: showIcon(repeatMode === "one" ? "repeat-once" : "repeat"),
       submenu: [
         {
-          id: "repeat",
           label: "列表循环",
           icon: showIcon("repeat"),
-          checked: playMode === "repeat",
           type: "radio",
-          click: () => win.webContents.send("changeMode", "repeat"),
+          checked: repeatMode === "list",
+          click: () => win.webContents.send("changeRepeat", "list"),
         },
         {
-          id: "repeat-once",
           label: "单曲循环",
           icon: showIcon("repeat-once"),
-          checked: playMode === "repeat-once",
           type: "radio",
-          click: () => win.webContents.send("changeMode", "repeat-once"),
+          checked: repeatMode === "one",
+          click: () => win.webContents.send("changeRepeat", "one"),
         },
         {
-          id: "shuffle",
-          label: "随机播放",
-          icon: showIcon("shuffle"),
-          checked: playMode === "shuffle",
+          label: "关闭循环",
+          icon: showIcon("repeat"),
           type: "radio",
-          click: () => win.webContents.send("changeMode", "shuffle"),
+          checked: repeatMode === "off",
+          click: () => win.webContents.send("changeRepeat", "off"),
         },
       ],
     },
@@ -259,10 +281,12 @@ class CreateTray implements MainTray {
   }
   /**
    * 设置播放模式
-   * @param mode 播放模式
+   * @param repeat 当前的重复播放模式
+   * @param shuffle 当前的随机播放模式
    */
-  setPlayMode(mode: PlayMode) {
-    playMode = mode;
+  setPlayMode(repeat: RepeatModeType, shuffle: ShuffleModeType) {
+    repeatMode = repeat;
+    shuffleMode = shuffle;
     // 更新菜单
     this.initTrayMenu();
   }

src/api/playlist.ts

@@ -26,11 +26,13 @@ export const playlistAllSongs = (id: number, limit: number = 50, offset: number
  * @param {number} id - 歌曲 id
  * @param {number} pid - 歌单 id
  * @param {number} sid - 要开始播放的歌曲的 id
+ * @param {AbortSignal} [signal] - 用于取消请求的信号
  */
-export const heartRateList = (id: number, pid: number, sid?: number) => {
+export const heartRateList = (id: number, pid: number, sid?: number, signal?: AbortSignal) => {
   return request({
     url: "/playmode/intelligence/list",
     params: { id, pid, sid, timestamp: Date.now() },
+    signal,
   });
 };
 

src/components/Layout/Menu.vue

@@ -17,25 +17,25 @@
 </template>
 
 <script setup lang="ts">
+import { usePlayerController } from "@/core/player/PlayerController";
+import { useDataStore, useMusicStore, useSettingStore, useStatusStore } from "@/stores";
+import type { CoverType } from "@/types/main";
+import { isLogin } from "@/utils/auth";
+import { isElectron } from "@/utils/env";
+import { renderIcon } from "@/utils/helper";
+import { openCreatePlaylist } from "@/utils/modal";
+import { debounce } from "lodash-es";
 import {
-  type MenuOption,
   type MenuGroupOption,
   type MenuInst,
-  NText,
-  NButton,
-  NEllipsis,
+  type MenuOption,
   NAvatar,
   NBadge,
+  NButton,
+  NEllipsis,
+  NText,
 } from "naive-ui";
-import type { CoverType } from "@/types/main";
-import { useStatusStore, useSettingStore, useDataStore, useMusicStore } from "@/stores";
-import { useRouter, RouterLink } from "vue-router";
-import { renderIcon } from "@/utils/helper";
-import { openCreatePlaylist } from "@/utils/modal";
-import { debounce } from "lodash-es";
-import { isLogin } from "@/utils/auth";
-import { isElectron } from "@/utils/env";
-import { usePlayerController } from "@/core/player/PlayerController";
+import { RouterLink, useRouter } from "vue-router";
 
 const router = useRouter();
 const dataStore = useDataStore();
@@ -105,7 +105,7 @@ const menuOptions = computed<MenuOption[] | MenuGroupOption[]>(() => {
               h(NText, null, () => "我喜欢的音乐"),
               !settingStore.hideHeartbeatMode
                 ? h(NButton, {
-                    type: statusStore.playHeartbeatMode ? "primary" : "default",
+                    type: statusStore.shuffleMode === "heartbeat" ? "primary" : "default",
                     round: true,
                     strong: true,
                     secondary: true,
@@ -271,7 +271,7 @@ const menuUpdate = (key: string, item: MenuOption) => {
     } else {
       // 更改播放模式
       statusStore.personalFmMode = true;
-      statusStore.playHeartbeatMode = false;
+      statusStore.shuffleMode = "off";
       player.playSong();
     }
     statusStore.showFullPlayer = true;
@@ -345,7 +345,7 @@ const checkMenuItem = () => {
 };
 
 // 开启心动模式
-const openHeartMode = debounce(() => player.toggleHeartMode(), 1000, {
+const openHeartMode = debounce(() => player.toggleShuffle("heartbeat"), 1000, {
   leading: true,
   trailing: false,
 });

src/components/Player/MainPlayer.vue

@@ -104,6 +104,16 @@
     </div>
     <!-- 控制 -->
     <div class="play-control">
+      <!-- 随机按钮 -->
+      <template v-if="musicStore.playSong.type !== 'radio' && !statusStore.personalFmMode">
+        <div class="play-icon" @click.stop="player.toggleShuffle()">
+          <SvgIcon
+            :name="statusStore.shuffleIcon"
+            :size="20"
+            :depth="statusStore.shuffleMode === 'off' ? 3 : 1"
+          />
+        </div>
+      </template>
       <!-- 不喜欢 -->
       <div
         v-if="statusStore.personalFmMode"
@@ -142,6 +152,16 @@
       <div class="play-icon" v-debounce="() => player.nextOrPrev('next')">
         <SvgIcon :size="26" name="SkipNext" />
       </div>
+      <!-- 循环按钮 -->
+      <template v-if="musicStore.playSong.type !== 'radio' && !statusStore.personalFmMode">
+        <div class="play-icon" @click.stop="player.toggleRepeat()">
+          <SvgIcon
+            :name="statusStore.repeatIcon"
+            :size="20"
+            :depth="statusStore.repeatMode === 'off' ? 3 : 1"
+          />
+        </div>
+      </template>
     </div>
     <!-- 功能 -->
     <Transition name="fade" mode="out-in">
@@ -187,21 +207,21 @@
 </template>
 
 <script setup lang="ts">
-import type { DropdownOption } from "naive-ui";
-import { useMusicStore, useStatusStore, useDataStore, useSettingStore } from "@/stores";
-import { convertSecondsToTime } from "@/utils/time";
-import { renderIcon, coverLoaded, copyData } from "@/utils/helper";
+import { usePlayerController } from "@/core/player/PlayerController";
+import { useSongManager } from "@/core/player/SongManager";
+import { useDataStore, useMusicStore, useSettingStore, useStatusStore } from "@/stores";
 import { toLikeSong } from "@/utils/auth";
+import { getTimeDisplay, TIME_FORMATS } from "@/utils/format";
+import { copyData, coverLoaded, renderIcon } from "@/utils/helper";
 import {
   openAutoClose,
   openChangeRate,
   openDownloadSong,
   openJumpArtist,
   openPlaylistAdd,
 } from "@/utils/modal";
-import { useSongManager } from "@/core/player/SongManager";
-import { usePlayerController } from "@/core/player/PlayerController";
-import { getTimeDisplay, TIME_FORMATS } from "@/utils/format";
+import { convertSecondsToTime } from "@/utils/time";
+import type { DropdownOption } from "naive-ui";
 
 const router = useRouter();
 const dataStore = useDataStore();
@@ -217,7 +237,7 @@ const timeDisplay0 = timeDisplay(0);
 const timeDisplay1 = timeDisplay(1);
 
 const toggleTimeFormat = () => {
-  const currentIndex = TIME_FORMATS.indexOf(settingStore.timeFormatMainPlayer)
+  const currentIndex = TIME_FORMATS.indexOf(settingStore.timeFormatMainPlayer);
   settingStore.timeFormatMainPlayer = TIME_FORMATS[(currentIndex + 1) % TIME_FORMATS.length];
 };
 
@@ -537,6 +557,7 @@ const instantLyrics = computed(() => {
         background-color 0.3s,
         transform 0.3s;
       cursor: pointer;
+      margin: 0 2px;
       .n-icon {
         color: var(--primary-hex);
       }

src/components/Player/PersonalFM.vue

@@ -76,11 +76,11 @@
 </template>
 
 <script setup lang="ts">
+import { usePlayerController } from "@/core/player/PlayerController";
+import { useSongManager } from "@/core/player/SongManager";
 import { useMusicStore, useStatusStore } from "@/stores";
 import { coverLoaded } from "@/utils/helper";
 import { debounce, isObject } from "lodash-es";
-import { useSongManager } from "@/core/player/SongManager";
-import { usePlayerController } from "@/core/player/PlayerController";
 
 const musicStore = useMusicStore();
 const statusStore = useStatusStore();
@@ -100,15 +100,15 @@ const fmPlayOrPause = () => {
   } else {
     // 更改播放模式
     statusStore.personalFmMode = true;
-    statusStore.playHeartbeatMode = false;
+    statusStore.shuffleMode = "off";
     player.playSong();
   }
 };
 
 // 下一曲
 const fmPlayNext = debounce(() => {
   statusStore.personalFmMode = true;
-  statusStore.playHeartbeatMode = false;
+  statusStore.shuffleMode = "off";
   player.nextOrPrev("next");
 }, 300);