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

<template>
  <teleport to="body">
    <div v-if="store.allPaperModal" class="dialog-container">
      <header class="tw-flex tw-place-content-between tw-items-center">
        <div class="tw-text-2xl ctw-text-base tw-ml-5 tw-my-2">全卷切换</div>
        <div class="tw-flex tw-items-center tw-gap-2 tw-mx-8 tw-flex-grow">
          <span
            v-for="(u, index) in urls"
            :key="index"
            @click="checkedIndex = index"
            class="image-index hover:tw-bg-gray-300"
            :class="checkedIndex === index && 'tw-bg-gray-300'"
          >
            {{ index + 1 }}
          </span>
        </div>
        <a-button shape="circle" @click="store.allPaperModal = false">
          <template #icon><CloseOutlined /></template>
        </a-button>
      </header>

      <div>
        <div
          v-for="(url, index) in urls"
          :key="index"
          style="display: none"
          :class="index === checkedIndex && 'show-image'"
        >
          <img :src="url" />
        </div>
      </div>
    </div>
  </teleport>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { CloseOutlined } from "@ant-design/icons-vue";
import { store } from "@/features/mark/store";

const urls = computed(() => {
  return store.currentTask?.sliceUrls ?? [];
});

let checkedIndex = $ref(0);
</script>

<style scoped>
.dialog-container {
  /* always top */
  z-index: 99999;
  position: absolute;
  background-color: white;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  min-width: var(--app-min-width);
}
header {
  color: var(--app-main-text-color);
  border-bottom: 1px solid var(--app-main-bg-color);
}
.image-index {
  display: inline-block;
  border: 1px solid grey;
  width: 25px;
  text-align: center;
  border-radius: 5px;

  cursor: pointer;
}

.show-image {
  display: block !important;
}
</style>