快捷键定位图片

src/features/mark/CommonMarkBody.vue

@@ -49,6 +49,8 @@ import {
   computed,
   defineEmit,
   defineProps,
+  onMounted,
+  onUnmounted,
   reactive,
   ref,
   watch,
@@ -113,6 +115,29 @@ watch(
 );
 // end: 缩略图定位
 
+// start: 快捷键定位
+const scrollContainerByKey = (e: KeyboardEvent) => {
+  const container = document.querySelector(
+    ".mark-body-container"
+  ) as HTMLDivElement;
+  if (e.key === "w") {
+    container.scrollBy({ top: -100, behavior: "smooth" });
+  } else if (e.key === "s") {
+    container.scrollBy({ top: 100, behavior: "smooth" });
+  } else if (e.key === "a") {
+    container.scrollBy({ left: -100, behavior: "smooth" });
+  } else if (e.key === "d") {
+    container.scrollBy({ left: 100, behavior: "smooth" });
+  }
+};
+onMounted(() => {
+  document.addEventListener("keypress", scrollContainerByKey);
+});
+onUnmounted(() => {
+  document.removeEventListener("keypress", scrollContainerByKey);
+});
+// end: 快捷键定位
+
 // start: 计算裁切图和裁切图上的分数轨迹和特殊标记轨迹
 let sliceImagesWithTrackList: Array<SliceImage> = reactive([]);
 let maxSliceWidth = 0; // 最大的裁切块宽度，图片容器以此为准

src/features/mark/MarkHistory.vue

@@ -19,6 +19,7 @@
       <input
         v-model="secretNumberInput"
         @keydown.stop="() => {}"
+        @keypress.stop="() => {}"
         type="text"
         placeholder="查找试卷"
         class="