试卷悬浮框

src/components/QmDialog.vue

@@ -7,7 +7,7 @@
         @mousedown="handleDragMouseDown"
       >
         <div class="tw-text-2xl tw-cursor-move">{{ title }}</div>
-        <a-button shape="circle" @click="close">
+        <a-button shape="circle" @click="$emit('close')">
           <template #icon><CloseOutlined /></template>
         </a-button>
       </header>
@@ -38,11 +38,8 @@ export default defineComponent({
     width: { type: String, default: "30%" },
     height: { type: String, default: "30%" },
   },
+  emits: ["close"],
   setup({ top, width, height, title }) {
-    const close = () => {
-      store.setting.uiSetting["answer.paper.modal"] = false;
-    };
-
     const positionStyle = reactive({
       top,
       left: "10%",
@@ -140,7 +137,6 @@ export default defineComponent({
     });
 
     return {
-      close,
       positionStyle,
       mouseHandler,
       resizeHandler,
@@ -153,7 +149,7 @@ export default defineComponent({
 
 <style scoped>
 .dialog-container {
-  z-index: 9000;
+  z-index: 1000;
   position: absolute;
   min-width: 100px;
   background-color: white;

src/features/mark/AnswerModal.vue

@@ -1,10 +1,12 @@
 <template>
   <qm-dialog
-    v-if="store.setting.uiSetting['answer.paper.modal']"
+    v-if="store.setting.uiSetting['answer.modal']"
     ref="dialog"
+    top="15%"
     width="700px"
     height="400px"
     title="答案"
+    @close="close"
   >
     <object
       :data="answerPDFUrl"
@@ -28,7 +30,11 @@ export default defineComponent({
     const answerPDFUrl = computed(() => {
       return store.setting.fileServer + store.setting.subject.answerUrl;
     });
-    return { store, answerPDFUrl };
+
+    const close = () => {
+      store.setting.uiSetting["answer.modal"] = false;
+    };
+    return { store, answerPDFUrl, close };
   },
 });
 </script>

src/features/mark/Mark.vue

@@ -22,6 +22,7 @@
     </div>
   </div>
   <AnswerModal />
+  <PaperModal />
 </template>
 
 <script lang="ts">
@@ -52,6 +53,7 @@ import MarkBoardMouse from "./MarkBoardMouse.vue";
 import { isEmpty, isNumber } from "lodash";
 import { message } from "ant-design-vue";
 import AnswerModal from "./AnswerModal.vue";
+import PaperModal from "./PaperModal.vue";
 
 export default defineComponent({
   name: "Mark",
@@ -63,6 +65,7 @@ export default defineComponent({
     MarkBoardKeyBoard,
     MarkBoardMouse,
     AnswerModal,
+    PaperModal,
   },
   setup: () => {
     const { addInterval } = useTimers();

src/features/mark/MarkHeader.vue

@@ -115,11 +115,19 @@
     <a-popover title="小助手" trigger="hover" class="tw-cursor-pointer">
       <template #content>
         <table class="assistant-table">
-          <tr>
+          <tr v-if="store.setting.subject.paperUrl">
+            <td>试卷</td>
+            <td>
+              <a-switch
+                v-model:checked="store.setting.uiSetting['paper.modal']"
+              />
+            </td>
+          </tr>
+          <tr v-if="store.setting.subject.answerUrl">
             <td>答案</td>
             <td>
               <a-switch
-                v-model:checked="store.setting.uiSetting['answer.paper.modal']"
+                v-model:checked="store.setting.uiSetting['answer.modal']"
               />
             </td>
           </tr>

src/features/mark/PaperModal.vue

@@ -0,0 +1,39 @@
+<template>
+  <qm-dialog
+    v-if="store.setting.uiSetting['paper.modal']"
+    ref="dialog"
+    top="10%"
+    width="700px"
+    height="400px"
+    title="试卷"
+    @close="close"
+  >
+    <object
+      :data="paperPDFUrl"
+      type="application/pdf"
+      frameBorder="0"
+      scrolling="auto"
+      height="100%"
+      width="100%"
+      toolbar="1"
+    />
+  </qm-dialog>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from "vue";
+import { store } from "./store";
+
+export default defineComponent({
+  name: "PaperModal",
+  setup() {
+    const paperPDFUrl = computed(() => {
+      return store.setting.fileServer + store.setting.subject.paperUrl;
+    });
+    const close = () => {
+      store.setting.uiSetting["answer.modal"] = false;
+    };
+    return { store, paperPDFUrl, close };
+  },
+});
+</script>

src/features/mark/store.ts

@@ -17,7 +17,8 @@ const obj = {
       "answer.paper.scale": 1,
       "score.board.collapse": false,
       "normal.mode": "keyboard",
-      "answer.paper.modal": false,
+      "paper.modal": false,
+      "answer.modal": false,
     },
     statusValue: "FORMAL",
     problemTypes: [],

src/types/index.ts

@@ -144,7 +144,8 @@ export interface UISetting {
   "score.board.collapse": boolean;
   "answer.paper.scale": number; // 0.2 gap
   "normal.mode": "keyboard" | "mouse";
-  "answer.paper.modal": boolean;
+  "paper.modal": boolean;
+  "answer.modal": boolean;
 }
 
 export interface MarkResult {