feat(desktop): 添加热键功能

packages/shared/package.json

@@ -44,6 +44,7 @@
     "@types/encoding-japanese": "^2.0.5",
     "@types/koa-router": "^7.4.8",
     "@types/koa-static": "^4.0.4",
+    "@types/node": "^18.16.19",
     "esno": "^0.16.3",
     "rollup": "^3.26.0",
     "rollup-plugin-dts": "^5.3.0",

packages/web/src/components/Setting/components/KeyboardShortcuts/KeyRow.vue

@@ -0,0 +1,35 @@
+<template>
+  <SettingRow :title="props.title">
+    <a-input v-model="modelValue" class="!w-200px" @keydown="keydown" @keyup="keyup" />
+  </SettingRow>
+</template>
+
+<script setup lang="ts">
+import SettingRow from '../SettingRow/index.vue';
+
+const modelValue = defineModel<string>();
+
+const props = defineProps<{
+  title: string;
+  keyText: string;
+}>();
+
+let isWatch = false;
+
+watch(
+  () => props.keyText,
+  (v) => {
+    if (isWatch) {
+      modelValue.value = v;
+    }
+  }
+);
+
+function keydown() {
+  isWatch = true;
+}
+
+function keyup() {
+  isWatch = false;
+}
+</script>

packages/web/src/components/Setting/components/KeyboardShortcuts/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <KeyRow v-model="settingStore.data.keyboardShortcuts.prevChapter" title="上一章" :key-text="keyText" />
+    <KeyRow v-model="settingStore.data.keyboardShortcuts.nextChapter" title="下一章" :key-text="keyText" />
+    <KeyRow v-model="settingStore.data.keyboardShortcuts.pageUp" title="上一屏" :key-text="keyText" />
+    <KeyRow v-model="settingStore.data.keyboardShortcuts.pageDown" title="下一屏" :key-text="keyText" />
+  </div>
+</template>
+
+<script setup>
+import { useMagicKeys } from '@/hooks/useMagicKeys';
+import { useSettingStore } from '@/stores/setting';
+import KeyRow from './KeyRow.vue';
+
+const { keyText } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    e.preventDefault();
+  }
+});
+
+const settingStore = useSettingStore();
+</script>

packages/web/src/components/Setting/components/ReadPage/index.vue

@@ -12,10 +12,10 @@
       <a-input-number v-model="settingStore.data.readStyle.letterSpacing" class="!w-120px" mode="button" />
     </SettingRow>
     <SettingRow title="字体颜色">
-      <a-color-picker v-model="settingStore.data.readStyle.textColor" show-text disabled-alpha />
+      <a-color-picker v-model="settingStore.data.readStyle.textColor" show-text />
     </SettingRow>
     <SettingRow title="背景颜色">
-      <a-color-picker v-model="settingStore.data.readStyle.backgroundColor" show-text disabled-alpha />
+      <a-color-picker v-model="settingStore.data.readStyle.backgroundColor" show-text />
     </SettingRow>
   </div>
 </template>

packages/web/src/components/Setting/index.vue

@@ -20,8 +20,12 @@
 
 <script setup>
 import ReadPage from './components/ReadPage/index.vue';
+import KeyboardShortcuts from './components/KeyboardShortcuts/index.vue';
 
-const navs = [{ title: '阅读页', component: ReadPage }];
+const navs = [
+  { title: '阅读页', component: ReadPage },
+  { title: '热键', component: KeyboardShortcuts }
+];
 
 const activeNavIdx = ref(0);
 </script>

packages/web/src/hooks/useMagicKeys.ts

@@ -0,0 +1,20 @@
+import { useMagicKeys as _useMagicKeys, type UseMagicKeysOptions } from '@vueuse/core';
+
+export function useMagicKeys(option?: UseMagicKeysOptions<false> | undefined) {
+  const aliasMap = {
+    arrowup: '↑',
+    arrowdown: '↓',
+    arrowleft: '←',
+    arrowright: '→',
+    control: 'ctrl'
+  };
+
+  const { current } = _useMagicKeys(option);
+
+  // @ts-ignore
+  const keyText = computed(() => [...current].map((key) => aliasMap[key] ?? key).join('+'));
+
+  return {
+    keyText
+  };
+}

packages/web/src/pages/pc/content/index.vue

@@ -19,8 +19,10 @@
 import { getContent } from '@/api';
 import { useChaptersStore } from '@/stores/chapters';
 import { useSettingStore } from '@/stores/setting';
+import { useKeyboard } from './keyboard';
 
 const route = useRoute();
+const router = useRouter();
 const chaptersStore = useChaptersStore();
 const settingStore = useSettingStore();
 
@@ -65,6 +67,51 @@ watch(() => route.query, init, {
   immediate: true,
   deep: true
 });
+
+// 上一章
+function onPrevChapter() {
+  if (!lastChapter.value) return;
+  router.push({
+    name: route.name,
+    query: {
+      ...route.query,
+      chapterPath: lastChapter.value
+    }
+  });
+}
+
+// 下一章
+function onNextChapter() {
+  if (!nextChapter.value) return;
+  router.push({
+    name: route.name,
+    query: {
+      ...route.query,
+      chapterPath: nextChapter.value
+    }
+  });
+}
+
+// 上一页
+function onPageUp() {
+  contentRef.value.scrollTop = contentRef.value.scrollTop - contentRef.value.offsetHeight + 5;
+}
+
+// 下一页
+function onPageDown() {
+  contentRef.value.scrollTop = contentRef.value.scrollTop + contentRef.value.offsetHeight - 5;
+}
+
+// 监听热键
+useKeyboard({}, (cmd) => {
+  const cmdMap = {
+    prevChapter: onPrevChapter,
+    nextChapter: onNextChapter,
+    pageUp: onPageUp,
+    pageDown: onPageDown
+  };
+  cmdMap[cmd] && cmdMap[cmd]();
+});
 </script>
 
 <style scoped>

packages/web/src/pages/pc/content/keyboard.ts

@@ -0,0 +1,20 @@
+import type { UseMagicKeysOptions } from '@vueuse/core';
+import { useMagicKeys } from '@/hooks/useMagicKeys';
+import { useSettingStore } from '@/stores/setting';
+
+type KeyboardEvent = 'prevChapter' | 'nextChapter' | 'pageUp' | 'pageDown';
+
+// 监听热键
+export function useKeyboard(options: UseMagicKeysOptions<false> | undefined, cb: (arg: KeyboardEvent) => {}) {
+  const settingStore = useSettingStore();
+  const { keyText } = useMagicKeys(options);
+
+  const settingKeys = Object.keys(settingStore.data.keyboardShortcuts) as KeyboardEvent[];
+  watch(keyText, (text) => {
+    for (const settingKey of settingKeys) {
+      if (settingStore.data.keyboardShortcuts[settingKey] === text) {
+        cb(settingKey);
+      }
+    }
+  });
+}

packages/web/src/stores/setting.ts

@@ -14,8 +14,16 @@ export type ReadStyle = {
   backgroundColor: string;
 };
 
+export type KeyboardShortcuts = {
+  prevChapter: string;
+  nextChapter: string;
+  pageUp: string;
+  pageDown: string;
+};
+
 export type Setting = {
   readStyle: ReadStyle;
+  keyboardShortcuts: KeyboardShortcuts;
 };
 
 export const useSettingStore = defineStore('setting', () => {
@@ -25,7 +33,13 @@ export const useSettingStore = defineStore('setting', () => {
       lineHeight: 1.5,
       letterSpacing: 1,
       textColor: '#ffffffb3',
-      backgroundColor: 'transparent'
+      backgroundColor: '#ffffff00'
+    },
+    keyboardShortcuts: {
+      prevChapter: '←',
+      nextChapter: '→',
+      pageUp: '↑',
+      pageDown: '↓'
     }
   });