快捷键Modal

src/features/mark/Mark.vue

@@ -31,6 +31,7 @@
   <AllPaperModal />
   <SheetViewModal />
   <SpecialTagModal />
+  <ShortCutModal />
 </template>
 
 <script setup lang="ts">
@@ -63,6 +64,7 @@ import MinimapModal from "./MinimapModal.vue";
 import AllPaperModal from "./AllPaperModal.vue";
 import SheetViewModal from "./SheetViewModal.vue";
 import SpecialTagModal from "./SpecialTagModal.vue";
+import ShortCutModal from "./ShortCutModal.vue";
 import { addFileServerPrefixToTask, preDrawImage } from "@/utils/utils";
 import { getPaper } from "@/api/jsonMark";
 import EventBus from "@/plugins/eventBus";

src/features/mark/MarkBoardTrack.vue

@@ -294,7 +294,8 @@ function numberKeyListener(event: KeyboardEvent) {
 }
 
 function submitListener(e: KeyboardEvent) {
-  if (import.meta.env.DEV && e.ctrlKey && e.key === "Enter") {
+  // if (import.meta.env.DEV && e.ctrlKey && e.key === "Enter") {
+  if (e.ctrlKey && e.key === "Enter") {
     submit();
   }
 }

src/features/mark/MarkHeader.vue

@@ -6,10 +6,7 @@
     <a-tooltip>
       <template #title>回评</template>
       <div
-        class="
-          tw-flex tw-place-content-center tw-cursor-pointer tw-relative
-          menu
-        "
+        class="tw-flex tw-place-content-center tw-cursor-pointer tw-relative menu"
         :class="[store.historyOpen && 'menu-toggled']"
         @click="store.toggleHistory"
       >
@@ -24,14 +21,7 @@
     </a-tooltip>
     <div style="max-width: 12%; margin-left: -20px">
       <a
-        class="
-          tw-text-white
-          tw-block
-          tw-overflow-ellipsis
-          tw-overflow-hidden
-          tw-whitespace-nowrap
-          header-big-text
-        "
+        class="tw-text-white tw-block tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap header-big-text"
         :title="store.setting.subject.name"
         href="/mark/subject-select"
         @dragstart.prevent="() => {}"
@@ -277,6 +267,14 @@
               />
             </td>
           </tr>
+          <tr v-if="store.isScanImage">
+            <td>快捷键</td>
+            <td>
+              <a-switch
+                v-model:checked="store.setting.uiSetting['shortCut.modal']"
+              />
+            </td>
+          </tr>
         </table>
       </template>
       <div class="tw-flex tw-items-center">

src/features/mark/ShortCutModal.vue

@@ -0,0 +1,114 @@
+<template>
+  <qm-dialog
+    v-if="store.setting.uiSetting['shortCut.modal']"
+    top="10%"
+    width="500px"
+    height="330px"
+    title="快捷键"
+    @close="close"
+  >
+    <div class="short-cut-container">
+      <div class="row">
+        <div class="tw-text-base tw-border-b-2 tw-mb-2">通用</div>
+      </div>
+      <div class="row">
+        <div>交卷</div>
+        <div>Ctrl + Enter</div>
+      </div>
+      <div class="row">
+        <div>放大</div>
+        <div>+</div>
+      </div>
+      <div class="row">
+        <div>缩小</div>
+        <div>-</div>
+      </div>
+      <div class="row">
+        <div>向上滑动</div>
+        <div>w</div>
+      </div>
+      <div class="row">
+        <div>向下滑动</div>
+        <div>s</div>
+      </div>
+      <div class="row">
+        <div>向左滑动</div>
+        <div>a</div>
+      </div>
+      <div class="row">
+        <div>向右滑动</div>
+        <div>d</div>
+      </div>
+      <div class="row">
+        <div>图片旋转</div>
+        <div>鼠标右键</div>
+      </div>
+      <div class="row">
+        <div>全屏窗口</div>
+        <div>F11</div>
+      </div>
+
+      <div class="row">
+        <div class="tw-text-base tw-border-b-2 tw-mb-2">轨迹模式</div>
+      </div>
+      <div class="row">
+        <div>切题</div>
+        <div>Tab</div>
+      </div>
+      <div class="row">
+        <div>键盘选分</div>
+        <div>Number 或 .</div>
+      </div>
+      <div class="row">
+        <div>取消选分</div>
+        <div>Esc</div>
+      </div>
+
+      <div class="row">
+        <div class="tw-text-base tw-border-b-2 tw-mt-4">键盘模式</div>
+      </div>
+      <div class="row">
+        <div>切题</div>
+        <div>← 或 →</div>
+      </div>
+      <div class="row">
+        <div>确认输入</div>
+        <div>Enter</div>
+      </div>
+      <div class="row">
+        <div>撤销上次</div>
+        <div>Backspace(删除)</div>
+      </div>
+      <div class="row">
+        <div>取消输入</div>
+        <div>Esc</div>
+      </div>
+    </div>
+  </qm-dialog>
+</template>
+
+<script setup lang="ts">
+import { store } from "@/store/store";
+
+const close = () => {
+  store.setting.uiSetting["shortCut.modal"] = false;
+};
+</script>
+
+<style>
+.short-cut-container {
+  margin: 20px;
+  columns: 2;
+  column-fill: auto;
+  height: calc(100% - 40px);
+}
+
+.short-cut-container .row {
+  display: flex;
+  gap: 2em;
+}
+.short-cut-container .row div:first-child {
+  color: var(--app-bold-text-color);
+  min-width: 60px;
+}
+</style>

src/types/index.ts

@@ -193,6 +193,7 @@ export interface UISetting {
   "answer.modal": boolean;
   "minimap.modal": boolean;
   "specialTag.modal": boolean;
+  "shortCut.modal": boolean;
   "score.fontSize.scale": number; // 0.1 gap
 }