✨ feat: 新增应用内快捷键 #560

Author: imsyy

components.d.ts

@@ -136,7 +136,6 @@ declare module 'vue' {
     PlayerSlider: typeof import('./src/components/Player/PlayerSlider.vue')['default']
     PlayerSpectrum: typeof import('./src/components/Player/PlayerSpectrum.vue')['default']
     PlaylistAdd: typeof import('./src/components/Modal/PlaylistAdd.vue')['default']
-    PlaylistComment: typeof import('./src/components/List/PlaylistComment.vue')['default']
     PlaySetting: typeof import('./src/components/Setting/PlaySetting.vue')['default']
     Provider: typeof import('./src/components/Global/Provider.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

package.json

@@ -1,7 +1,7 @@
 {
   "name": "splayer",
   "productName": "SPlayer",
-  "version": "3.0.0-beta.6",
+  "version": "3.0.0",
   "description": "A minimalist music player",
   "main": "./out/main/index.js",
   "author": "imsyy",

src/components/Setting/KeyboardSetting.vue

@@ -18,9 +18,14 @@
       </n-card>
     </div>
     <div class="set-list">
-      <n-h3 prefix="bar"> 快捷键更改 </n-h3>
+      <n-h3 prefix="bar"> 全局快捷键更改 </n-h3>
       <n-card id="shortcut-list" class="set-item">
-        <n-list v-for="(item, key, index) in shortcutList" :key="index" class="shortcut" hoverable>
+        <n-list
+          v-for="(item, key, index) in globalShortcutList"
+          :key="index"
+          class="shortcut"
+          hoverable
+        >
           <n-list-item>
             <template #prefix>
               <n-text class="name">{{ item.name }}</n-text>
@@ -39,7 +44,7 @@
                 <n-input
                   :value="item.globalShortcut"
                   :disabled="!shortcutStore.globalOpen"
-                  :status="item?.isRegistered ? 'error' : 'success'"
+                  :status="item.globalShortcut && item?.isRegistered ? 'error' : undefined"
                   placeholder="快捷键为空"
                   readonly
                   @focus="inputFocus(key, true)"
@@ -58,11 +63,39 @@
       </n-card>
       <n-card class="set-item">
         <div class="label">
-          <n-text class="name">恢复默认</n-text>
+          <n-text class="name">恢复全局默认</n-text>
         </div>
         <n-button type="primary" strong secondary @click="resetShortcut"> 恢复默认 </n-button>
       </n-card>
     </div>
+    <div class="set-list">
+      <n-h3 prefix="bar"> 页面内快捷键 </n-h3>
+      <n-card id="page-shortcut-list" class="set-item">
+        <n-list
+          v-for="(item, key, index) in pageShortcutList"
+          :key="index"
+          class="shortcut"
+          hoverable
+        >
+          <n-list-item>
+            <template #prefix>
+              <n-text class="name">{{ item.name }}</n-text>
+            </template>
+            <n-thing>
+              <n-input
+                :value="item.shortcut"
+                placeholder="快捷键为空"
+                readonly
+                @focus="inputFocus(key)"
+                @blur="inputBlur"
+                @keydown.stop="inputKeyDown"
+                @keyup="keyHandled = ''"
+              />
+            </n-thing>
+          </n-list-item>
+        </n-list>
+      </n-card>
+    </div>
   </div>
 </template>
 
@@ -83,6 +116,34 @@ const keyHandled = ref<string>("");
 // 快捷键列表
 const shortcutList = ref(cloneDeep(shortcutStore.shortcutList));
 
+// 全局快捷键列表（排除页面内快捷键）
+const globalShortcutList = computed(() => {
+  const pageShortcutKeys = ["openPlayer", "openPlayList", "closePlayer"];
+  return Object.entries(shortcutList.value)
+    .filter(([key]) => !pageShortcutKeys.includes(key))
+    .reduce(
+      (acc, [key, value]) => {
+        acc[key] = value;
+        return acc;
+      },
+      {} as Record<string, (typeof shortcutList.value)[keyof typeof shortcutList.value]>,
+    );
+});
+
+// 页面内快捷键列表
+const pageShortcutList = computed(() => {
+  const pageShortcutKeys = ["openPlayer", "openPlayList", "closePlayer"];
+  return Object.entries(shortcutList.value)
+    .filter(([key]) => pageShortcutKeys.includes(key))
+    .reduce(
+      (acc, [key, value]) => {
+        acc[key] = value;
+        return acc;
+      },
+      {} as Record<string, (typeof shortcutList.value)[keyof typeof shortcutList.value]>,
+    );
+});
+
 // 获取按下的快捷键
 const getShortcut = (e: KeyboardEvent): string => {
   // 允许输入
@@ -142,6 +203,8 @@ const getShortcut = (e: KeyboardEvent): string => {
     "ArrowUp",
     "ArrowRight",
     "ArrowDown",
+    // Escape 键
+    "Escape",
   ];
   if (!allowedCodes.includes(e.code)) return "";
   return e.code;
@@ -157,8 +220,12 @@ const inputFocus = (type: string, isGlobal: boolean = false) => {
 };
 
 // 失去焦点
-const inputBlur = () => {
-  if (selectShortcut.value) shortcutStore.registerAllShortcuts();
+const inputBlur = async () => {
+  if (selectShortcut.value) {
+    await shortcutStore.registerAllShortcuts();
+    // 重新检查所有全局快捷键占用状态
+    await checkAllGlobalShortcuts();
+  }
   selectShortcut.value = null;
   selectGlobal.value = false;
 };
@@ -199,9 +266,15 @@ const inputKeyDown = async (e: KeyboardEvent) => {
       // 先更改
       shortcutList.value[selectShortcut.value].globalShortcut = globalShortcut;
       // 是否被占用
-      await checkRegistered(globalShortcut);
+      const isRegistered = await checkRegistered(globalShortcut);
+      if (isRegistered) {
+        window.$message.warning("快捷键已被占用");
+      } else {
+        window.$message.success("快捷键设置成功");
+      }
       changeShortcut(globalShortcut);
     } else {
+      // 页面内快捷键或全局快捷键的页面内部分
       changeShortcut(shortcut);
       window.$message.success("快捷键设置成功");
     }
@@ -226,28 +299,53 @@ const isRepeat = (shortcut: string): boolean => {
 };
 
 // 是否被占用
-const checkRegistered = debounce(async (shortcut: string) => {
+const checkRegistered = debounce(async (shortcut: string, shortcutKey?: string) => {
   try {
-    if (!shortcut || !selectShortcut.value) return;
+    if (!shortcut) return false;
+    const targetKey = shortcutKey || selectShortcut.value;
+    if (!targetKey) return false;
     const isRegistered = await window.electron.ipcRenderer.invoke(
       "is-shortcut-registered",
       formatForGlobalShortcut(shortcut),
     );
-    if (isRegistered) window.$message.warning("快捷键已被占用");
     // 更新状态
-    shortcutList.value[selectShortcut.value].isRegistered = isRegistered;
+    shortcutList.value[targetKey].isRegistered = isRegistered;
+    return isRegistered;
   } catch (error) {
     console.error("Error checking shortcut registration:", error);
     window.$message.error("快捷键检查出现错误");
-    changeShortcut("");
+    if (selectShortcut.value) {
+      changeShortcut("");
+    }
+    return false;
   }
 }, 500);
 
+// 检查所有全局快捷键占用状态
+const checkAllGlobalShortcuts = async () => {
+  if (!shortcutStore.globalOpen) return;
+  for (const key in shortcutList.value) {
+    const item = shortcutList.value[key];
+    if (item.globalShortcut) {
+      await checkRegistered(item.globalShortcut, key);
+    }
+  }
+};
+
 // 开关全局快捷键
-const updateGlobalOpen = (val: boolean) => {
-  if(val) shortcutStore.registerAllShortcuts();
-  else window.electron.ipcRenderer.send("unregister-all-shortcut");
-}
+const updateGlobalOpen = async (val: boolean) => {
+  if (val) {
+    await shortcutStore.registerAllShortcuts();
+    // 重新检查所有全局快捷键占用状态
+    await checkAllGlobalShortcuts();
+  } else {
+    window.electron.ipcRenderer.send("unregister-all-shortcut");
+    // 清除所有占用状态
+    for (const key in shortcutList.value) {
+      shortcutList.value[key].isRegistered = false;
+    }
+  }
+};
 
 // 重置快捷键
 const resetShortcut = () => {
@@ -264,13 +362,16 @@ const resetShortcut = () => {
   });
 };
 
-onMounted(() => {
+onMounted(async () => {
   shortcutStore.registerAllShortcuts();
+  // 检查所有全局快捷键占用状态
+  await checkAllGlobalShortcuts();
 });
 </script>
 
 <style lang="scss" scoped>
-#shortcut-list {
+#shortcut-list,
+#page-shortcut-list {
   overflow: hidden;
   :deep(.n-card__content) {
     padding: 0;
@@ -289,4 +390,11 @@ onMounted(() => {
     }
   }
 }
+#page-shortcut-list {
+  .shortcut {
+    .name {
+      min-width: 120px;
+    }
+  }
+}
 </style>

src/stores/shortcut.ts

@@ -18,6 +18,9 @@ interface ShortcutStore {
     volumeUp: ShortcutType;
     volumeDown: ShortcutType;
     toogleDesktopLyric: ShortcutType;
+    openPlayer: ShortcutType;
+    openPlayList: ShortcutType;
+    closePlayer: ShortcutType;
   };
 }
 
@@ -61,6 +64,24 @@ export const useShortcutStore = defineStore("shortcut", {
         shortcut: "CmdOrCtrl+KeyD",
         globalShortcut: "CmdOrCtrl+Shift+D",
       },
+      // 打开播放界面
+      openPlayer: {
+        name: "打开播放界面",
+        shortcut: "KeyP",
+        globalShortcut: "",
+      },
+      // 打开播放列表
+      openPlayList: {
+        name: "打开播放列表",
+        shortcut: "KeyL",
+        globalShortcut: "",
+      },
+      // 关闭播放界面
+      closePlayer: {
+        name: "关闭播放界面",
+        shortcut: "Escape",
+        globalShortcut: "",
+      },
     },
   }),
   getters: {},

src/utils/init.ts

@@ -61,6 +61,7 @@ const initEventListener = () => {
 const keyDownEvent = debounce((event: KeyboardEvent) => {
   const player = usePlayer();
   const shortcutStore = useShortcutStore();
+  const statusStore = useStatusStore();
   const target = event.target as HTMLElement;
   // 排除元素
   const extendsDom = ["input", "textarea"];
@@ -78,10 +79,18 @@ const keyDownEvent = debounce((event: KeyboardEvent) => {
     const shortcutParts = shortcut.shortcut.split("+");
     // 标志位
     let match = true;
-    // 检查修饰键
-    if (shortcutParts.includes("CmdOrCtrl") && !isCtrl) match = false;
-    if (shortcutParts.includes("Shift") && !isShift) match = false;
-    if (shortcutParts.includes("Alt") && !isAlt) match = false;
+    // 检查是否包含修饰键
+    const hasCmdOrCtrl = shortcutParts.includes("CmdOrCtrl");
+    const hasShift = shortcutParts.includes("Shift");
+    const hasAlt = shortcutParts.includes("Alt");
+    // 检查修饰键匹配
+    if (hasCmdOrCtrl && !isCtrl) match = false;
+    if (hasShift && !isShift) match = false;
+    if (hasAlt && !isAlt) match = false;
+    // 如果快捷键定义中没有修饰键，确保没有按下任何修饰键
+    if (!hasCmdOrCtrl && !hasShift && !hasAlt) {
+      if (isCtrl || isShift || isAlt) match = false;
+    }
     // 检查实际按键
     const mainKey = shortcutParts.find(
       (part: string) => part !== "CmdOrCtrl" && part !== "Shift" && part !== "Alt",
@@ -108,6 +117,20 @@ const keyDownEvent = debounce((event: KeyboardEvent) => {
         case "toogleDesktopLyric":
           player.toggleDesktopLyric();
           break;
+        case "openPlayer":
+          // 打开播放界面（任意界面）
+          statusStore.showFullPlayer = true;
+          break;
+        case "closePlayer":
+          // 关闭播放界面（仅在播放界面时）
+          if (statusStore.showFullPlayer) {
+            statusStore.showFullPlayer = false;
+          }
+          break;
+        case "openPlayList":
+          // 打开播放列表（任意界面）
+          statusStore.playListShow = !statusStore.playListShow;
+          break;
         default:
           break;
       }

src/utils/player.ts

@@ -742,7 +742,12 @@ class Player {
     data: SongType[],
     song?: SongType,
     pid?: number,
-    options: { showTip?: boolean; scrobble?: boolean; play?: boolean } = {
+    options: {
+      showTip?: boolean;
+      scrobble?: boolean;
+      play?: boolean;
+      keepHeartbeatMode?: boolean;
+    } = {
       showTip: true,
       scrobble: true,
       play: true,
@@ -766,7 +771,9 @@ class Player {
     // 更新列表
     await dataStore.setPlayList(processedData);
     // 关闭特殊模式
-    if (statusStore.playHeartbeatMode) this.toggleHeartMode(false);
+    if (statusStore.playHeartbeatMode && !options.keepHeartbeatMode) {
+      this.toggleHeartMode(false);
+    }
     if (statusStore.personalFmMode) statusStore.personalFmMode = false;
     // 是否直接播放
     if (song && typeof song === "object" && "id" in song) {
@@ -1020,9 +1027,15 @@ class Player {
         this.message?.destroy();
         const heartRatelists = formatSongsList(result.data);
         this.nextPrefetch = null;
-        statusStore.playHeartbeatMode = true;
         statusStore.playIndex = 0;
-        await this.updatePlayList(heartRatelists, heartRatelists[0]);
+        // 先更新播放列表，再设置心动模式标志
+        await this.updatePlayList(heartRatelists, heartRatelists[0], undefined, {
+          showTip: true,
+          scrobble: true,
+          play: true,
+          keepHeartbeatMode: true,
+        });
+        statusStore.playHeartbeatMode = true;
       } else {
         this.message?.destroy();
         window.$message.error(result.message || "心动模式开启出错，请重试");

src/views/Home/HomeOnline.vue

@@ -250,6 +250,7 @@ onMounted(() => {
 .title {
   margin-top: 28px;
   padding: 0 4px;
+  width: max-content;
   .n-h {
     margin: 0;
     display: flex;