各种快捷键的功能

src/App.vue

@@ -41,13 +41,18 @@ function keyBoardScroll(e: any) {
   let pWrap = getParentNodeIsScroll(imgWrap)
   let t = (pWrap as any).scrollTop
   if (word === 'ArrowDown') {
-    t += 30
+    t += 100
   } else if (word === 'ArrowUp') {
-    t -= 30
+    t -= 100
   } else {
     // e.returnValue = false
   }
-  pWrap.scrollTop = t
+  // pWrap.scrollTop = t
+  pWrap.scrollTo({
+    left: 0,
+    top: t,
+    behavior: 'smooth',
+  })
 }
 onMounted(() => {
   document.addEventListener('keydown', keyBoardScroll)

src/components/shared/MarkHeader.vue

@@ -75,6 +75,7 @@ import { sessionStorage } from '@/plugins/storage'
 import BaseDialog from '@/components/element/BaseDialog.vue'
 import LockEntry from '../common/LockEntry.vue'
 import StandardDialog from '@/components/shared/StandardDialog.vue'
+import bus from '@/utils/bus'
 type ButtonType =
   | 'back'
   | 'scale-up'
@@ -246,6 +247,21 @@ const onOperationClick = (button: HeaderButton) => {
       break
   }
 }
+function busEventHandler() {
+  bus.on('scale-up', () => {
+    ratio.value = validVal(add(ratio.value, 0.1), 2, 0.5)
+    saveMarkSet()
+  })
+  bus.on('scale-down', () => {
+    ratio.value = validVal(minus(ratio.value, 0.1), 2, 0.5)
+    saveMarkSet()
+  })
+  bus.on('init-scale', () => {
+    ratio.value = 1
+    saveMarkSet()
+  })
+}
+busEventHandler()
 
 const emitEvent = (type: EventType, val?: string | number | boolean | number[]) => {
   if (type === 'standard') {

src/components/shared/ScoringPanel.vue

@@ -46,6 +46,7 @@ import useVModel from '@/hooks/useVModel'
 import useVW from '@/hooks/useVW'
 import useFetch from '@/hooks/useFetch'
 import { sessionStorage } from '@/plugins/storage'
+import bus from '@/utils/bus'
 const props = withDefaults(
   defineProps<{
     /** 弹窗模式? */
@@ -198,6 +199,9 @@ const onToggleClick = () => {
     modalVisible.value = false
   }
 }
+bus.on('mark-method-toggle', () => {
+  onToggleClick()
+})
 </script>
 
 <style scoped lang="scss">

src/components/shared/ScoringPanelItem.vue

@@ -187,7 +187,7 @@ const inputBlur = () => {
 }
 
 const KEY_WHITE_LIST1 = ['ArrowLeft', 'ArrowRight', 'Backspace', 'Delete', 'Enter']
-const KEY_WHITE_LIST2 = ['\\.', '[0-9]']
+const KEY_WHITE_LIST2 = ['\\.', '[0-9]', '[+-]']
 const KEY_VALID_REG = new RegExp(
   KEY_WHITE_LIST1.map((k) => `\\b${k}\\b`)
     .concat(KEY_WHITE_LIST2)
@@ -217,14 +217,22 @@ const onValidScore = (e: any) => {
   const start = target.selectionStart || 0
 
   if (!KEY_VALID_REG.test(e.key)) {
+    console.log('valid:', e.key)
+
     e.preventDefault()
     return
   }
-
   if (['ArrowLeft', 'ArrowRight'].includes(e.key)) {
     return
   }
+  console.log('e.key:', e.key)
 
+  if (e.key === '+' && Number(currentScore.value || 0) < scoreList.value[scoreList.value.length - 1]) {
+    currentScore.value = Number(currentScore.value || 0) + 1 + ''
+  }
+  if (e.key === '-' && Number(currentScore.value || 0) > scoreList.value[0]) {
+    currentScore.value = Number(currentScore.value || 0) - 1 + ''
+  }
   if ('Enter' === e.key) {
     let targetInputValue = e.target?.value
     if (!targetInputValue) {

src/components/shared/message/Message.vue

@@ -72,6 +72,7 @@ import useMainStore from '@/store/main'
 import MessageWindow from '@/components/shared/message/MessageWindow.vue'
 import ConfirmButton from '@/components/common/ConfirmButton.vue'
 import SvgIcon from '@/components/common/SvgIcon.vue'
+import bus from '@/utils/bus'
 
 const props = withDefaults(
   defineProps<{
@@ -191,6 +192,9 @@ const onSendMessage = () => {
   messageWindowType.value = 'send'
   visibleMessageWindow.value = true
 }
+bus.on('fast-send-msg', () => {
+  onSendMessage()
+})
 </script>
 
 <style scoped lang="scss">

src/hooks/useMarkHeader.ts

@@ -1,6 +1,13 @@
-import { reactive, ref, computed, watch, toRefs } from 'vue'
-import { useRouter } from 'vue-router'
+import { reactive, ref, computed, watch, toRefs, onMounted, onBeforeUnmount } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import bus from '@/utils/bus'
+function getParentNodeIsScroll(el: any): any {
+  if (el.className.includes('scroll-auto')) {
+    return el
+  } else {
+    return getParentNodeIsScroll(el.parentNode)
+  }
+}
 const useMarkHeader = () => {
   const { back, push } = useRouter()
 
@@ -59,7 +66,88 @@ const useMarkHeader = () => {
     // push({ name: 'MarkStandard' })
     bus.emit('showStandard')
   }
-
+  function markKeyBoardEvents(e: any) {
+    console.log('eee', e)
+    if (e.key === 'F7') {
+      e.preventDefault()
+      bus.emit('scale-up')
+    } else if (e.key === 'F8') {
+      e.preventDefault()
+      bus.emit('scale-down')
+    } else if (e.key === 'F9') {
+      e.preventDefault()
+      bus.emit('init-scale')
+    } else if (e.key === 'F10') {
+      e.preventDefault()
+      bus.emit('fast-send-msg')
+    } else if (e.key === 'F12') {
+      e.preventDefault()
+      bus.emit('mark-method-toggle')
+    } else if (e.code === 'Space') {
+      const imgWrap = document.querySelector('.img-wrap')
+      if (!imgWrap) {
+        return
+      } else {
+        const pWrap = getParentNodeIsScroll(imgWrap)
+        let t = (pWrap as any).scrollTop
+        t += 100
+        pWrap.scrollTo({
+          left: 0,
+          top: t,
+          behavior: 'smooth',
+        })
+      }
+    } else if (e.keyCode == 36) {
+      const imgWrap = document.querySelector('.img-wrap')
+      if (!imgWrap) {
+        return
+      } else {
+        const pWrap = getParentNodeIsScroll(imgWrap)
+        pWrap.scrollTo({
+          left: 0,
+          top: 0,
+          behavior: 'smooth',
+        })
+      }
+    } else if (e.keyCode == 35) {
+      const imgWrap = document.querySelector('.img-wrap')
+      if (!imgWrap) {
+        return
+      } else {
+        const pWrap = getParentNodeIsScroll(imgWrap)
+        pWrap.scrollTo({
+          left: 0,
+          top: pWrap.scrollHeight,
+          behavior: 'smooth',
+        })
+      }
+    } else if (e.key == 'Backspace') {
+      if (e.target.tagName === 'INPUT' || e.target.className.includes('contenteditable-ele')) {
+        return false
+      } else {
+        bus.emit('mark-prev')
+      }
+    }
+  }
+  function paperDblClick(e: any) {
+    if ((e.target.className || '').includes('paper-img')) {
+      bus.emit('scale-up')
+    }
+  }
+  onMounted(() => {
+    const route = useRoute()
+    if (route.name === 'MarkingMark') {
+      document.addEventListener('keydown', markKeyBoardEvents)
+      document.addEventListener('dblclick', paperDblClick)
+    }
+  })
+  onBeforeUnmount(() => {
+    const route = useRoute()
+    if (route.name === 'MarkingMark') {
+      document.removeEventListener('keydown', markKeyBoardEvents)
+      document.removeEventListener('dblclick', paperDblClick)
+    }
+  })
   return {
     ...toRefs(imgOperation),
     onBack,

src/modules/marking/mark/index.vue

@@ -27,7 +27,7 @@
         <span class="preview" @click="onPreview">
           <svg-icon name="preview"></svg-icon>
         </span>
-        <div ref="imgWrap" :class="{ 'text-center': center }" class="img-wrap">
+        <div ref="imgWrap" :class="{ 'text-center': center }" class="img-wrap scroll-auto">
           <img :src="dataUrl" alt="" class="paper-img" :style="{ 'background-color': frontColor }" />
         </div>
       </div>
@@ -203,8 +203,6 @@ const refreshTaskPool = (force = false, isRefresh = false, hasLimit = false) =>
       if (currentTaskPool.length < (isRefresh ? Number.MAX_SAFE_INTEGER : CACHE_NUM)) {
         // if (currentTaskPool.length < Number.MAX_SAFE_INTEGER) {
         getMarkingTask().then((result: any) => {
-          console.log('result:', result)
-
           if (result?.length) {
             // currentTaskPool[isRefresh ? 'unshift' : 'push'](...result)
             if (hasLimit) {
@@ -514,6 +512,14 @@ watch(enableRemark, (val) => {
   }
   mainLayoutStore.getRenderMenuList()
 })
+bus.on('mark-prev', async () => {
+  const markHistory = await useFetch('getMarkHistory').fetch()
+  if (!markHistory.markHistoryList.length) {
+    return false
+  } else {
+    historyTaskChange(markHistory.markHistoryList[0])
+  }
+})
 </script>
 
 <style scoped lang="scss">
@@ -529,7 +535,7 @@ watch(enableRemark, (val) => {
     .img-wrap {
       width: 100%;
       height: 100%;
-      overflow: auto;
+      // overflow: auto;
     }
     .mark-status {
       display: inline-block;