mark-web/src/features/mark/MinimapModal.vue

<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 {
  border: 1px dotted grey;
}

.mini-map-container .ant-spin-container > div {
  width: 100% !important;
}

.mini-map-container .score-container {
  display: none;
}
</style>