fix: 切换章节后热键失效

aooiuu · Oct 10, 2024 · 01b13a1 · 01b13a1
1 parent 8a6d4b9
commit 01b13a1
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 3 deletions.
diff --git a/packages/web/src/components/index.ts b/packages/web/src/components/index.ts
@@ -4,7 +4,7 @@ import Category from './Category/index.vue';
 import Tabs from './Tabs/index.vue';
 import RuleEmpty from './RuleEmpty/index.vue';
 
-export function useComponent(app: App<Element>) {
+export default function useComponent(app: App<Element>) {
   app.component('ARCover', Cover);
   app.component('ARCategory', Category);
   app.component('ARTabs', Tabs);

diff --git a/packages/web/src/directive/index.ts b/packages/web/src/directive/index.ts
@@ -0,0 +1,7 @@
+import type { App } from 'vue';
+
+export default function useDirective(app: App) {
+  app.directive('focus', {
+    mounted: (el) => el.focus()
+  });
+}
diff --git a/packages/web/src/main.ts b/packages/web/src/main.ts
@@ -1,7 +1,8 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
-import { useComponent } from './components';
+import useComponent from './components';
+import useDirective from './directive';
 import './assets';
 import './plugins/vsc-ui';
 import './plugins/antd';
@@ -17,6 +18,7 @@ const app = createApp(App);
 app.use(router);
 app.use(createPinia());
 useComponent(app);
+useDirective(app);
 
 router.beforeEach((to, _from, next) => {
   const { query, path } = to;

diff --git a/packages/web/src/pages/pc/content/index.vue b/packages/web/src/pages/pc/content/index.vue
@@ -11,7 +11,7 @@
       <!-- 加载 -->
       <a-spin v-if="loading" :spinning="loading" class="h-full w-full items-center justify-center !flex" />
       <!-- 阅读区域 -->
-      <div ref="contentRef" tabindex="0" class="relative h-full flex flex-1 flex-col overflow-y-auto indent-2em outline-none sm:px-60">
+      <div ref="contentRef" v-focus tabindex="0" class="relative h-full flex flex-1 flex-col overflow-y-auto indent-2em outline-none sm:px-60">
         <!-- 漫画 -->
         <template v-if="contentType === ContentType.MANGA">
           <img v-for="(row, idx) in content" :key="idx" :src="row" />

diff --git a/packages/web/src/pages/vscode/content/index.vue b/packages/web/src/pages/vscode/content/index.vue
@@ -6,6 +6,7 @@
     <div
       id="text-container"
       ref="contentRef"
+      v-focus
       tabindex="0"
       class="flex-1 overflow-y-auto whitespace-pre-wrap break-words p-10 indent-2em lh-1.5em outline-none"
       :style="{