特殊标记悬浮框

src/features/mark/Mark.vue

@@ -27,6 +27,7 @@
 
   <AllPaperModal />
   <SheetViewModal />
+  <SpecialTagModal />
 </template>
 
 <script lang="ts">
@@ -61,6 +62,7 @@ import PaperModal from "./PaperModal.vue";
 import MinimapModal from "./MinimapModal.vue";
 import AllPaperModal from "./AllPaperModal.vue";
 import SheetViewModal from "./SheetViewModal.vue";
+import SpecialTagModal from "./SpecialTagModal.vue";
 
 export default defineComponent({
   name: "Mark",
@@ -76,6 +78,7 @@ export default defineComponent({
     MinimapModal,
     AllPaperModal,
     SheetViewModal,
+    SpecialTagModal,
   },
   setup: () => {
     const { addInterval } = useTimers();

src/features/mark/MarkHeader.vue

@@ -149,9 +149,13 @@
               />
             </td>
           </tr>
-          <tr>
+          <tr v-if="store.setting.forceSpecialTag">
             <td>特殊标记</td>
-            <td><a-switch v-model:checked="specialTagChecked" /></td>
+            <td>
+              <a-switch
+                v-model:checked="store.setting.uiSetting['specialTag.modal']"
+              />
+            </td>
           </tr>
           <tr v-if="store.setting.statusValue !== 'TRIAL'">
             <td>问题卷</td>
@@ -353,8 +357,6 @@ export default defineComponent({
       problemRef.value?.showModal();
     };
 
-    const specialTagChecked = ref(false);
-
     return {
       store,
       modeName,
@@ -374,7 +376,6 @@ export default defineComponent({
       openProfileModal,
       switchGroupRef,
       openSwitchGroupModal,
-      specialTagChecked,
       problemRef,
       openProblemModal,
     };

src/features/mark/SpecialTagModal.vue

@@ -0,0 +1,78 @@
+<template>
+  <qm-dialog
+    v-if="store.setting.uiSetting['specialTag.modal']"
+    ref="dialog"
+    top="10%"
+    width="300px"
+    height="180px"
+    title="特殊标记"
+    @close="close"
+  >
+    <div
+      class="special-tag-container tw-flex tw-place-content-between tw-m-4 tw-text-xl tw-cursor-pointer"
+    >
+      <div>√</div>
+      <div>X</div>
+      <div>乄</div>
+      <div><u>下划线</u></div>
+    </div>
+
+    <div class="tw-flex tw-place-content-between tw-mt-8">
+      <qm-button
+        type="primary"
+        shape="round"
+        size="large"
+        :clickTimeout="300"
+        @click="clearLatestTagOfCurrentTask"
+      >
+        回退
+      </qm-button>
+
+      <qm-button
+        type="primary"
+        shape="round"
+        size="large"
+        :clickTimeout="300"
+        @click="clearAllTagsOfCurrentTask"
+      >
+        清除本题
+      </qm-button>
+    </div>
+  </qm-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { store } from "./store";
+
+export default defineComponent({
+  name: "SpecialTagModal",
+  setup() {
+    function clearLatestTagOfCurrentTask() {
+      if (!store.currentMarkResult) return;
+      store.currentMarkResult.specialTagList.splice(-1);
+    }
+
+    function clearAllTagsOfCurrentTask() {
+      if (!store.currentMarkResult) return;
+      store.currentMarkResult.specialTagList = [];
+    }
+
+    const close = () => {
+      store.setting.uiSetting["specialTag.modal"] = false;
+    };
+    return {
+      store,
+      close,
+      clearLatestTagOfCurrentTask,
+      clearAllTagsOfCurrentTask,
+    };
+  },
+});
+</script>
+
+<style>
+.special-tag-container {
+  /* border: 1px dotted grey; */
+}
+</style>

src/features/mark/store.ts

@@ -20,6 +20,7 @@ const obj = {
       "paper.modal": false,
       "answer.modal": false,
       "minimap.modal": false,
+      "specialTag.modal": false,
     },
     statusValue: "FORMAL",
     problemTypes: [],

src/types/index.ts

@@ -151,6 +151,7 @@ export interface UISetting {
   "paper.modal": boolean;
   "answer.modal": boolean;
   "minimap.modal": boolean;
+  "specialTag.modal": boolean;
 }
 
 export interface MarkResult {