缩略图

src/components/QmDialog.vue

@@ -16,7 +16,7 @@
         </a-button>
       </header>
 
-      <div class="tw-m-1" style="height: calc(100% - 60px)">
+      <div class="tw-m-1 tw-overflow-scroll" style="height: calc(100% - 60px)">
         <slot></slot>
       </div>
 

src/features/mark/Mark.vue

@@ -23,6 +23,7 @@
   </div>
   <AnswerModal />
   <PaperModal />
+  <MinimapModal />
 </template>
 
 <script lang="ts">
@@ -54,6 +55,7 @@ import { isEmpty, isNumber } from "lodash";
 import { message } from "ant-design-vue";
 import AnswerModal from "./AnswerModal.vue";
 import PaperModal from "./PaperModal.vue";
+import MinimapModal from "./MinimapModal.vue";
 
 export default defineComponent({
   name: "Mark",
@@ -66,6 +68,7 @@ export default defineComponent({
     MarkBoardMouse,
     AnswerModal,
     PaperModal,
+    MinimapModal,
   },
   setup: () => {
     const { addInterval } = useTimers();

src/features/mark/MarkBody.vue

@@ -297,6 +297,23 @@ export default defineComponent({
 
     watchEffect(renderPaperAndMark);
 
+    watch(
+      () => store.minimapScrollTo,
+      () => {
+        const container = document.querySelector(
+          ".mark-body-container"
+        ) as HTMLDivElement;
+        addTimeout(() => {
+          if (container) {
+            const { scrollHeight } = container;
+            container.scrollTo({
+              top: scrollHeight * store.minimapScrollTo,
+            });
+          }
+        }, 10);
+      }
+    );
+
     const answerPaperScale = computed(() => {
       // 放大、缩小不影响页面之前的滚动条定位
       let percentWidth = 0;

src/features/mark/MarkHeader.vue

@@ -137,7 +137,11 @@
           </tr>
           <tr>
             <td>缩略图</td>
-            <td><a-switch v-model:checked="miniMapChecked" /></td>
+            <td>
+              <a-switch
+                v-model:checked="store.setting.uiSetting['minimap.modal']"
+              />
+            </td>
           </tr>
           <tr>
             <td>特殊标记</td>

src/features/mark/MinimapModal.vue

@@ -0,0 +1,76 @@
+<template>
+  <qm-dialog
+    v-if="store.setting.uiSetting['minimap.modal']"
+    ref="dialog"
+    top="10%"
+    width="200px"
+    height="500px"
+    title="缩略图"
+    @close="close"
+  >
+    <div
+      class="mini-map-container"
+      v-html="imagesHtml"
+      @click.stop="setScrollTo"
+    ></div>
+  </qm-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, onBeforeUpdate, ref, watch } from "vue";
+import { store } from "./store";
+
+export default defineComponent({
+  name: "MinimapModal",
+  setup() {
+    // 切换任务后，关闭缩略图
+    watch(
+      () => store.currentTask,
+      () => {
+        close();
+      }
+    );
+
+    const imagesHtml = ref("");
+
+    onBeforeUpdate(() => {
+      imagesHtml.value =
+        document.querySelector(".mark-body-container")?.innerHTML ??
+        "请关闭或重新打开";
+      // 没取到图片，提示
+      if (imagesHtml.value.length <= 500) {
+        imagesHtml.value = "请关闭或重新打开";
+      }
+
+      // console.log(imagesHtml);
+    });
+
+    const setScrollTo = (e: MouseEvent) => {
+      // console.log(e);
+      const target = e.target as HTMLElement;
+      const container = target.parentElement?.parentElement as HTMLDivElement;
+      const containerPos = container.getBoundingClientRect();
+      const parent = target.parentElement as HTMLDivElement;
+      const parentPos = parent.getBoundingClientRect();
+      // console.log(containerPos, parentPos);
+      // 试验出来的... 大概就是2个顶部距离相减，得到相对距离
+      const scrollTo =
+        (e.offsetY + parentPos.y - containerPos.y) /
+        parseFloat(getComputedStyle(container).height);
+      if (typeof scrollTo === "number") {
+        store.minimapScrollTo = scrollTo;
+      }
+    };
+    const close = () => {
+      store.setting.uiSetting["minimap.modal"] = false;
+    };
+    return { store, imagesHtml, setScrollTo, close };
+  },
+});
+</script>
+
+<style>
+.mini-map-container .ant-spin-container > div {
+  width: 100% !important;
+}
+</style>

src/features/mark/store.ts

@@ -19,6 +19,7 @@ const obj = {
       "normal.mode": "keyboard",
       "paper.modal": false,
       "answer.modal": false,
+      "minimap.modal": false,
     },
     statusValue: "FORMAL",
     problemTypes: [],
@@ -43,6 +44,7 @@ const obj = {
   historyTasks: [],
   removeScoreTracks: [],
   maxModalZIndex: 1020,
+  minimapScrollTo: 0,
 } as MarkStore;
 
 /** 如果currentTask不存在，则返回undefined; 如果currentMarkResult不存在，则创建一个对应的markResult并返回 */

src/types/index.ts

@@ -20,6 +20,7 @@ export interface MarkStore {
   removeScoreTracks: Array<Track>;
   message: string | null;
   maxModalZIndex: number;
+  minimapScrollTo: number; // 高度的百分比
 }
 
 export interface Setting {
@@ -147,6 +148,7 @@ export interface UISetting {
   "normal.mode": "keyboard" | "mouse";
   "paper.modal": boolean;
   "answer.modal": boolean;
+  "minimap.modal": boolean;
 }
 
 export interface MarkResult {