fix: cannot input

Author: zyronon

apps/nuxt/app/pages/(articles)/practice-articles/[id].vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { addStat, setUserDictProp } from '@typewords/core/apis'
-import { BaseIcon, Tooltip, Toast } from '@typewords/base'
+import { BaseIcon, Toast, Tooltip } from '@typewords/base'
 import ConflictNotice from '@typewords/core/components/dialog/ConflictNotice.vue'
 import ArticleList from '@typewords/core/components/list/ArticleList.vue'
 import Panel from '@typewords/core/components/Panel.vue'
@@ -9,11 +9,8 @@ import SettingDialog from '@typewords/core/components/setting/SettingDialog.vue'
 import { AppEnv, DICT_LIST } from '@typewords/core/config/env.ts'
 import { genArticleSectionData, usePlayArticleTextAudio, usePlaySentenceAudio } from '@typewords/core/hooks/article.ts'
 import { useArticleOptions } from '@typewords/core/hooks/dict.ts'
-import {
-  useDisableEventListener,
-  useOnKeyboardEventListener,
-  useStartKeyboardEventListener,
-} from '@typewords/core/hooks/event.ts'
+import { useOnKeyboardEventListener, useStartKeyboardEventListener } from '@typewords/core/hooks/event.ts'
+import { useDisableEventListener } from '@typewords/utils'
 import useTheme from '@typewords/core/hooks/theme.ts'
 import ArticleAudio from '@typewords/core/components/article/ArticleAudio.vue'
 import EditSingleArticleModal from '@typewords/core/components/article/EditSingleArticleModal.vue'
@@ -35,7 +32,7 @@ import {
 } from '@typewords/core/utils'
 import { getPracticeArticleCacheLocal } from '@typewords/core/utils/cache.ts'
 import { usePracticeArticlePersistence } from '@typewords/core/composables/usePracticePersistence'
-import { useEvents, emitter, EventKey } from '@typewords/core/utils/eventBus'
+import { emitter, EventKey, useEvents } from '@typewords/core/utils/eventBus'
 import { computed, onMounted, onUnmounted, provide, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { DictType, PracticeArticleWordType, ShortcutKey } from '@typewords/core/types/enum.ts'
@@ -205,9 +202,7 @@ onMounted(() => {
 
 async function unmount() {
   document.removeEventListener('visibilitychange', onvisibilitychange)
-
   console.log('onUnmounted')
-  window.disableEventListener = false
   const cache = await getPracticeArticleCacheLocal()
   //如果有缓存，则更新花费的时间；因为用户不输入不会保存数据
   if (cache) {
@@ -222,8 +217,6 @@ async function unmount() {
 
 onUnmounted(unmount)
 
-onDeactivated(unmount)
-
 useStartKeyboardEventListener()
 useDisableEventListener(() => loading)
 

apps/nuxt/app/pages/(words)/practice-words/[id].vue

@@ -5,11 +5,8 @@ import { emitter, EventKey, useEvents } from '@typewords/core/utils/eventBus.ts'
 import { useSettingStore } from '@typewords/core/stores/setting.ts'
 import { useRuntimeStore } from '@typewords/core/stores/runtime.ts'
 import type { Dict, PracticeData, TaskWords, Word } from '@typewords/core/types/types.ts'
-import {
-  useDisableEventListener,
-  useOnKeyboardEventListener,
-  useStartKeyboardEventListener,
-} from '@typewords/core/hooks/event.ts'
+import { useStartKeyboardEventListener } from '@typewords/core/hooks/event.ts'
+import { useDisableEventListener } from '@typewords/utils'
 import useTheme from '@typewords/core/hooks/theme.ts'
 import { getCurrentStudyWord, useWordOptions } from '@typewords/core/hooks/dict.ts'
 import {
@@ -776,20 +773,6 @@ async function savePracticeDataIns(where?) {
 
 const savePracticeData = debounce(savePracticeDataIns, 500)
 
-function onKeyUp(e: KeyboardEvent) {
-  // console.log('onKeyUp', e)
-  typingRef.hideWord()
-}
-
-function onKeyDown(e: KeyboardEvent) {
-  // console.log('onKeyDown', e)
-  switch (e.key) {
-    case 'Backspace':
-      typingRef.del()
-      break
-  }
-}
-
 function repeat() {
   console.log('重学一遍')
   wordPersistence.clear()
@@ -920,8 +903,7 @@ function randomWrite() {
 }
 
 useStartKeyboardEventListener()
-useDisableEventListener(() => loading)
-useOnKeyboardEventListener(onKeyDown, onKeyUp)
+// useDisableEventListener(() => loading)
 
 watch(isIniting, n => {
   if (!n) {

apps/nuxt/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@typewords/base": "workspace:*",
     "@typewords/libs": "workspace:*",
-    "@typewords/core": "workspace:*"
+    "@typewords/core": "workspace:*",
+    "@typewords/utils": "workspace:*"
   }
 }

apps/vscode-web/package.json

@@ -16,6 +16,7 @@
     "@typewords/base": "workspace:*",
     "@typewords/libs": "workspace:*",
     "@typewords/core": "workspace:*",
+    "@typewords/utils": "workspace:*",
     "jszip": "^3.10.1"
   },
   "config": {

apps/vscode-web/src/pages/(words)/practice-words/[id].vue

@@ -6,10 +6,10 @@ import { useSettingStore } from '@typewords/core/stores/setting.ts'
 import { useRuntimeStore } from '@typewords/core/stores/runtime.ts'
 import type { Dict, PracticeData, TaskWords, Word } from '@typewords/core/types/types.ts'
 import {
-  useDisableEventListener,
   useOnKeyboardEventListener,
   useStartKeyboardEventListener,
 } from '@typewords/core/hooks/event.ts'
+import { useDisableEventListener } from '@typewords/utils'
 import useTheme from '@typewords/core/hooks/theme.ts'
 import { getCurrentStudyWord, useWordOptions } from '@typewords/core/hooks/dict.ts'
 import {

packages/base/package.json

@@ -14,5 +14,8 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
-  "author": ""
+  "author": "",
+  "dependencies": {
+    "@typewords/utils": "workspace:*"
+  }
 }

packages/base/src/BaseInput.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, useAttrs, watch, computed, onUnmounted } from 'vue'
 import Close from './icon/Close.vue'
+import { useDisableEventListener } from '@typewords/utils'
 
 const props = defineProps({
   modelValue: [String, Number],
@@ -36,17 +37,7 @@ let focus = $ref(false)
 let inputEl = $ref<HTMLDivElement>()
 const passwordVisible = ref(false)
 
-//当聚焦时，禁用输入监听
-watch(
-  () => focus,
-  (n: any) => {
-    window.disableEventListener = n
-  }
-)
-
-onUnmounted(() => {
-  window.disableEventListener = false
-})
+useDisableEventListener(() => focus)
 
 const inputType = computed(() => {
   if (props.type === 'password') {

packages/base/src/Textarea.vue

@@ -15,17 +15,15 @@
       @blur="onBlur"
     />
     <!-- 字数统计 -->
-    <span
-      v-if="showWordLimit && maxlength"
-      class="absolute bottom-1 right-2 text-xs text-gray-400 select-none"
-    >
+    <span v-if="showWordLimit && maxlength" class="absolute bottom-1 right-2 text-xs text-gray-400 select-none">
       {{ innerValue.length }} / {{ maxlength }}
     </span>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, watch, computed, nextTick, onUnmounted } from 'vue'
+import { useDisableEventListener } from '@typewords/utils'
 
 const props = defineProps<{
   modelValue: string
@@ -50,9 +48,7 @@ const textareaRef = ref<HTMLTextAreaElement>()
 
 // 聚焦时禁用练习键盘事件监听，参照 BaseInput.vue 的处理方式
 const focus = ref(false)
-watch(focus, (n: boolean) => {
-  ;(window as any).disableEventListener = n
-})
+useDisableEventListener(focus)
 
 const onFocus = (e: FocusEvent) => {
   focus.value = true
@@ -110,7 +106,6 @@ watch(
   { immediate: true }
 )
 
-
 const vFocus = {
   mounted: (el, bind) => {
     if (bind.value) {
@@ -119,11 +114,6 @@ const vFocus = {
     }
   },
 }
-
-onUnmounted(() => {
-  window.disableEventListener = false
-})
-
 </script>
 <style scoped lang="scss">
 .disabled {

packages/core/package.json

@@ -16,7 +16,8 @@
   "author": "",
   "dependencies": {
     "@typewords/base": "workspace:*",
-    "@typewords/libs": "workspace:*"
+    "@typewords/libs": "workspace:*",
+    "@typewords/utils": "workspace:*"
   },
   "devDependencies": {
     "unplugin-vue-macros": "^2.14.5",

packages/core/src/components/article/EditSingleArticleModal.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-
-import type {Article} from '../../types';
-import {useDisableEventListener} from "../../hooks/event.ts";
-import EditArticle from "./EditArticle.vue";
-import {getDefaultArticle} from '../../types';
-import {defineAsyncComponent} from "vue";
+import type { Article } from '../../types'
+import { useDisableEventListener } from '@typewords/utils'
+import EditArticle from './EditArticle.vue'
+import { getDefaultArticle } from '../../types'
+import { defineAsyncComponent } from 'vue'
 
 const Dialog = defineAsyncComponent(() => import('@typewords/base/Dialog'))
 
@@ -15,35 +14,25 @@ interface IProps {
 
 const props = withDefaults(defineProps<IProps>(), {
   article: () => getDefaultArticle(),
-  modelValue: false
+  modelValue: false,
 })
 const emit = defineEmits<{
   save: [val: Article]
   'update:modelValue': [val: boolean]
 }>()
 
 useDisableEventListener(() => props.modelValue)
-
 </script>
 
 <template>
-  <Dialog
-      :header="false"
-      :model-value="props.modelValue"
-      @close="emit('update:modelValue',false)"
-      :full-screen="true"
-  >
+  <Dialog :header="false" :model-value="props.modelValue" @close="emit('update:modelValue', false)" :full-screen="true">
     <div class="wrapper">
-      <EditArticle
-          :article="article"
-          @save="val => emit('save',val)"
-      />
+      <EditArticle :article="article" @save="val => emit('save', val)" />
     </div>
   </Dialog>
 </template>
 
 <style scoped lang="scss">
-
 .wrapper {
   width: 100%;
   height: 100%;