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

<template>
  <qm-dialog
    v-if="store.setting.uiSetting['minimap.modal']"
    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 setup lang="ts">
import { onBeforeUpdate, watch } from "vue";
import { store } from "@/store/store";

// 切换任务后，关闭缩略图
watch(
  () => store.currentTask,
  () => {
    close();
  }
);

let imagesHtml = $ref("");

onBeforeUpdate(() => {
  imagesHtml =
    document.querySelector(".mark-body-container div:first-of-type")
      ?.innerHTML ?? "请关闭或重新打开";
});

const setScrollTo = (e: MouseEvent) => {
  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 scrollToX =
    (e.offsetX + parentPos.x - containerPos.x) /
    parseFloat(getComputedStyle(container).width);
  const scrollToY =
    (e.offsetY + parentPos.y - containerPos.y) /
    parseFloat(getComputedStyle(container).height);
  if (typeof scrollToX === "number" && typeof scrollToY === "number") {
    store.minimapScrollToX = scrollToX;
    store.minimapScrollToY = scrollToY;
  }
};
const close = () => {
  store.setting.uiSetting["minimap.modal"] = false;
};
</script>

<style>
.mini-map-container {
  background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
    linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.mini-map-container div div:not(.single-image-container) {
  display: none;
}

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

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