From f59b43cbbe3bc8f3fdec76c8a6f311285ad5859c Mon Sep 17 00:00:00 2001
From: zilong <zilong.yang@gmail.com>
Date: Sat, 6 Nov 2021 17:45:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BF=AB=E6=8D=B7=E9=94=AE,=E9=98=B2=E6=8A=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                  |  1 +
 src/App.vue                   | 56 +++++++++++++++++------------------
 src/lib/useBackSnaps.js       |  2 +-
 src/lib/useHotkey.js          | 39 ++++++++++++++++++++++++
 src/views/common/SongCtrl.vue | 11 ++++++-
 yarn.lock                     |  5 ++++
 6 files changed, 84 insertions(+), 30 deletions(-)
 create mode 100644 src/lib/useHotkey.js

diff --git a/package.json b/package.json
index 155cb15..eef8a26 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "core-js": "^3.6.5",
     "dayjs": "^1.10.7",
     "element-plus": "^1.1.0-beta.19",
+    "hotkeys-js": "^3.8.7",
     "lodash": "^4.17.21",
     "pubsub-js": "^1.9.3",
     "unplugin-vue-components": "^0.15.6",
diff --git a/src/App.vue b/src/App.vue
index 7d09e41..eba3185 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,9 +22,9 @@ import {
   NMessageProvider,
 } from "naive-ui";
 import router from "./router";
+import useHotkey from '@/lib/useHotkey.js'
 
-// import { CloudCircleSharp } from "@vicons/ionicons5";
-
+useHotkey() //快捷键
 const store = useStore();
 
 /**
@@ -62,15 +62,14 @@ const showSongDetail = ref(false); //是否显示歌曲详细信息
 const showSearch = ref(false); //是否显示搜索
 
 watch(
-  ()=> store.state.showSongDetail,
-  ()=>{
-    showSongDetail.value = toRaw(store.state.showSongDetail)
+  () => store.state.showSongDetail,
+  () => {
+    showSongDetail.value = toRaw(store.state.showSongDetail);
   },
   {
     immediate: true,
   }
-)
-
+);
 
 //处理route消息
 const routeToken = pubsub.subscribe("router", (msg, data) => {
@@ -90,42 +89,44 @@ const token = pubsub.subscribe("zp", (msg, data) => {
       showPlaying.value = !showPlaying.value;
       break;
     case "zp.toggleSongDetail":
-      showSongDetail.value = store.state.showSongDetail = !showSongDetail.value;
+      showSongDetail.value = store.state.showSongDetail =
+        !showSongDetail.value;
       break;
     case "zp.showSearch":
       showSearch.value = true;
       break;
     case "zp.toggleSearch":
-      showSearch.value = !showSearch.value ;
+      showSearch.value = !showSearch.value;
       break;
   }
 });
 
 //卸载组件
-onUnmounted(() => { 
+onUnmounted(() => {
   pubsub.unsubscribe(routeToken);
   pubsub.unsubscribe(token);
 });
 
-
-const wpEl = ref('')
+const wpEl = ref("");
 const hideWins = (e) => {
   // console.log(e.clientX > 0,e, wpEl.value.clientWidth);
   //显示当前播放
-  if (showPlaying.value 
-    && e.clientX > 0
-    && e.clientX < wpEl.value.clientWidth - 500
-    && e.clientY > 40
-    && e.clientY < wpEl.value.clientHeight - 64
+  if (
+    showPlaying.value &&
+    e.clientX > 0 &&
+    e.clientX < wpEl.value.clientWidth - 500 &&
+    e.clientY > 40 &&
+    e.clientY < wpEl.value.clientHeight - 64
   ) {
     showPlaying.value = false;
   }
   //显示搜索
-  if (showSearch.value
-    && e.clientX > 0
-    && e.clientX < wpEl.value.clientWidth - 360
-    && e.clientY > 40
-    && e.clientY < wpEl.value.clientHeight - 64
+  if (
+    showSearch.value &&
+    e.clientX > 0 &&
+    e.clientX < wpEl.value.clientWidth - 360 &&
+    e.clientY > 40 &&
+    e.clientY < wpEl.value.clientHeight - 64
   ) {
     showSearch.value = false;
   }
@@ -133,8 +134,7 @@ const hideWins = (e) => {
 
 const keyup = (e) => {
   console.log(e);
-   
-}
+};
 </script>
 
 <template>
@@ -172,7 +172,7 @@ const keyup = (e) => {
           </div>
         </div>
         <div id="wpSongDetail" v-show="showSongDetail">
-          <SongDetail/>
+          <SongDetail />
         </div>
         <div id="wpPlayingList" v-show="showPlaying">
           <div id="playingList">
@@ -294,8 +294,8 @@ body {
     }
   }
 
-  #wpSearch{
-    #search{
+  #wpSearch {
+    #search {
       position: absolute;
       top: 40px;
       right: 0;
@@ -304,7 +304,7 @@ body {
       background-color: #fff;
       z-index: 2000;
       border: #ddd solid 1px;
-      
+
       overflow-y: auto;
       // padding: 8px;
     }
diff --git a/src/lib/useBackSnaps.js b/src/lib/useBackSnaps.js
index dc45d86..57f8b59 100644
--- a/src/lib/useBackSnaps.js
+++ b/src/lib/useBackSnaps.js
@@ -4,7 +4,7 @@ import { useStore } from "vuex";
 //设置
 let config = {
   elName: "mainContent", //#元素名称
-  log: true, //是否显示log
+  log: false, //是否显示log
 };
 
 const backSnaps = []; //返回快照数组
diff --git a/src/lib/useHotkey.js b/src/lib/useHotkey.js
new file mode 100644
index 0000000..5912903
--- /dev/null
+++ b/src/lib/useHotkey.js
@@ -0,0 +1,39 @@
+import { debounce, throttle } from "lodash";
+import pubsub from "pubsub-js";
+import hotkeys from "hotkeys-js";
+
+export default function useHotkey(){
+  hotkeys(
+    [
+      "space,ctrl+p,⌘+p",
+      "ctrl+left,⌘+left,ctrl+right,⌘+right",
+      "enter,ctrl+enter,⌘+enter",
+    ].join(","),
+    throttle((e, h) => {
+      switch (h.key) {
+        // space,ctrl+p,⌘+p
+        case "space":
+        case "ctrl+p":
+        case "⌘+p":
+          pubsub.publish("zp.pause");
+          break;
+        // ctrl+left,⌘+left,ctrl+right,⌘+right
+        case "ctrl+left":
+        case "⌘+left":
+          pubsub.publish("zp.previous");
+          break;
+        case "ctrl+right":
+        case "⌘+right":
+          pubsub.publish("zp.next");
+          break;
+        // enter,ctrl+enter,⌘+enter
+        case "enter":
+        case "ctrl+enter":
+        case "⌘+enter":
+          pubsub.publish("zp.toggleSongDetail");
+          break;
+      }
+      e.preventDefault();
+    }, 500)
+  );
+};
diff --git a/src/views/common/SongCtrl.vue b/src/views/common/SongCtrl.vue
index e47b4ba..181c42d 100644
--- a/src/views/common/SongCtrl.vue
+++ b/src/views/common/SongCtrl.vue
@@ -165,7 +165,9 @@ const favorite = () => {
 };
 
 const removeCurrentSong = () => {
-  pubsub.publish('zp.removeCurrPlayingSong', { id: store.state.settings.songId })
+  pubsub.publish("zp.removeCurrPlayingSong", {
+    id: store.state.settings.songId,
+  });
 };
 
 let interval;
@@ -197,9 +199,16 @@ const psToken = pubsub.subscribe("zp", (msg, data) => {
     case "zp.next":
       forward();
       break;
+    case "zp.previous":
+      previous();
+      break;
     case "zp.stop":
       stop();
       break;
+    case "zp.pause":
+      if (playing.value) pause();
+      else resume();
+      break;
     case "zp.setProgressScale":
       setProgressScale(data.scale);
       break;
diff --git a/yarn.lock b/yarn.lock
index caeddae..ffebe27 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5691,6 +5691,11 @@ hosted-git-info@^4.0.2:
   dependencies:
     lru-cache "^6.0.0"
 
+hotkeys-js@^3.8.7:
+  version "3.8.7"
+  resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.8.7.tgz#c16cab978b53d7242f860ca3932e976b92399981"
+  integrity sha512-ckAx3EkUr5XjDwjEHDorHxRO2Kb7z6Z2Sxul4MbBkN8Nho7XDslQsgMJT+CiJ5Z4TgRxxvKHEpuLE3imzqy4Lg==
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"