全卷切换

src/components/QmDialog.vue

@@ -35,6 +35,7 @@ import { CloseOutlined } from "@ant-design/icons-vue";
 import { store } from "@/features/mark/store";
 
 export default defineComponent({
+  name: "QmDialog",
   components: { CloseOutlined },
   props: {
     title: { type: String, default: "" },
@@ -170,6 +171,9 @@ export default defineComponent({
   border-radius: 5px;
   box-shadow: 4px 6px 2px grey;
 }
+header {
+  background-color: #eff3f6;
+}
 .resize-handler {
   position: absolute;
   bottom: 0;

src/features/mark/AllPaperModal.vue

@@ -0,0 +1,89 @@
+<template>
+  <teleport to="body">
+    <div v-if="store.allPaperModal" class="dialog-container">
+      <header ref="mouseHandler" class="tw-flex tw-place-content-between">
+        <div class="tw-text-2xl tw-cursor-move">全卷切换</div>
+        <div class="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 lang="ts">
+import { computed, defineComponent, onUnmounted, reactive, ref } from "vue";
+import { CloseOutlined } from "@ant-design/icons-vue";
+import { store } from "@/features/mark/store";
+
+export default defineComponent({
+  name: "AllPaperModal",
+  components: { CloseOutlined },
+  props: {},
+  emits: ["close"],
+  setup() {
+    const urls = computed(() => {
+      return (
+        store.currentTask?.sliceUrls.map((s) => store.setting.fileServer + s) ??
+        []
+      );
+    });
+
+    const checkedIndex = ref(0);
+
+    return { store, urls, checkedIndex };
+  },
+});
+</script>
+
+<style scoped>
+.dialog-container {
+  /* always top */
+  z-index: 99999;
+  position: absolute;
+  background-color: white;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+header {
+  background-color: #eff3f6;
+}
+.image-index {
+  display: inline-block;
+  border: 1px solid grey;
+  width: 25px;
+  margin-right: 10px;
+  margin-top: 5px;
+  text-align: center;
+  border-radius: 5px;
+
+  cursor: pointer;
+}
+
+.show-image {
+  display: block !important;
+}
+</style>

src/features/mark/Mark.vue

@@ -24,6 +24,8 @@
   <AnswerModal />
   <PaperModal />
   <MinimapModal />
+
+  <AllPaperModal />
 </template>
 
 <script lang="ts">
@@ -56,6 +58,7 @@ import { message } from "ant-design-vue";
 import AnswerModal from "./AnswerModal.vue";
 import PaperModal from "./PaperModal.vue";
 import MinimapModal from "./MinimapModal.vue";
+import AllPaperModal from "./AllPaperModal.vue";
 
 export default defineComponent({
   name: "Mark",
@@ -69,6 +72,7 @@ export default defineComponent({
     AnswerModal,
     PaperModal,
     MinimapModal,
+    AllPaperModal,
   },
   setup: () => {
     const { addInterval } = useTimers();

src/features/mark/MarkHeader.vue

@@ -133,7 +133,7 @@
           </tr>
           <tr>
             <td>全卷</td>
-            <td><a-switch v-model:checked="allPaperChecked" /></td>
+            <td><a-switch v-model:checked="store.allPaperModal" /></td>
           </tr>
           <tr>
             <td>缩略图</td>
@@ -347,8 +347,6 @@ export default defineComponent({
       problemRef.value?.showModal();
     };
 
-    const allPaperChecked = ref(false);
-    const miniMapChecked = ref(false);
     const specialTagChecked = ref(false);
 
     return {
@@ -370,8 +368,6 @@ export default defineComponent({
       openProfileModal,
       switchGroupRef,
       openSwitchGroupModal,
-      allPaperChecked,
-      miniMapChecked,
       specialTagChecked,
       problemRef,
       openProblemModal,

src/features/mark/store.ts

@@ -45,6 +45,7 @@ const obj = {
   removeScoreTracks: [],
   maxModalZIndex: 1020,
   minimapScrollTo: 0,
+  allPaperModal: false,
 } as MarkStore;
 
 /** 如果currentTask不存在，则返回undefined; 如果currentMarkResult不存在，则创建一个对应的markResult并返回 */

src/types/index.ts

@@ -21,6 +21,7 @@ export interface MarkStore {
   message: string | null;
   maxModalZIndex: number;
   minimapScrollTo: number; // 高度的百分比
+  allPaperModal: boolean; // 是否显示全卷
 }
 
 export interface Setting {