阅卷：查看裁切图，旋转、放大等操作

src/features/mark/CommonMarkBody.vue

@@ -32,6 +32,7 @@
           :src="item.url"
           @click="(event) => innerMakeTrack(event, item)"
           draggable="false"
+          @contextmenu="showBigImage"
         />
         <MarkDrawTrack
           :track-list="item.trackList"
@@ -80,6 +81,8 @@ import {
 } from "@/utils/utils";
 import { dragImage } from "./use/draggable";
 import MultiMediaMarkBody from "./MultiMediaMarkBody.vue";
+import "viewerjs/dist/viewer.css";
+import Viewer from "viewerjs";
 
 const props = defineProps<{
   useMarkResult?: boolean;
@@ -488,6 +491,27 @@ const innerMakeTrack = (event: MouseEvent, item: SliceImage) => {
 };
 // end: 评分
 
+// start: 显示大图，供查看和翻转
+const showBigImage = (event: MouseEvent) => {
+  event.preventDefault();
+  // console.log(event);
+  let viewer: Viewer = null as unknown as Viewer;
+  viewer && viewer.destroy();
+  viewer = new Viewer(event.target as HTMLElement, {
+    // inline: true,
+    viewed() {
+      viewer.zoomTo(1);
+    },
+    hidden() {
+      viewer.destroy();
+    },
+    zIndex: 1000000,
+  });
+  console.log(viewer);
+  viewer.show();
+};
+// end: 显示大图，供查看和翻转
+
 // onRenderTriggered(({ key, target, type }) => {
 //   console.log({ key, target, type });
 // });

src/features/mark/use/draggable.ts

@@ -3,10 +3,12 @@ import { onMounted, onUnmounted, ref } from "vue";
 export function dragImage() {
   // grab moving
   let pos = { top: 0, left: 0, x: 0, y: 0 };
-  const dragContainer = ref((null as unknown) as HTMLDivElement);
+  const dragContainer = ref(null as unknown as HTMLDivElement);
   // const isGrabbing = ref(false);
 
   const mouseDownHandler = function (e: MouseEvent) {
+    // 防止鼠标左键激发
+    if (e.button !== 0) return;
     pos = {
       // The current scroll
       left: dragContainer.value.scrollLeft,

src/utils/utils.ts

@@ -104,12 +104,15 @@ function cacheFIFO() {
     const ary = [...objectUrlMap.entries()];
     const toRelease = ary.splice(0, 10);
     // 为了避免部分图片还没显示就被revoke了，这里做一个延迟revoke
-    // TODO: 此处有个瑕疵，缩略图的显示与试卷不是同时显示，是有可能被清除了的，只能让用户刷新了
-    setTimeout(() => {
-      for (const u of toRelease) {
+    // 此处有个瑕疵，缩略图的显示与试卷不是同时显示，是有可能被清除了的，只能让用户刷新了。 => 见下面的fix
+    for (const u of toRelease) {
+      // 如果当前图片仍在引用 objectUrl , 则将其放入缓存中
+      if (document.querySelector(u[1])) {
+        ary.push(u);
+      } else {
         URL.revokeObjectURL(u[1]);
       }
-    }, 5 * 60 * 1000);
+    }
     objectUrlMap = new Map(ary);
   }
 }