快捷键,防抖

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",

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;
     }

src/lib/useBackSnaps.js

@@ -4,7 +4,7 @@ import { useStore } from "vuex";
 //设置
 let config = {
   elName: "mainContent", //#元素名称
-  log: true, //是否显示log
+  log: false, //是否显示log
 };
 
 const backSnaps = []; //返回快照数组

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)
+  );
+};

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;

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"