特殊标记

src/features/mark/MarkBoardTrack.vue

@@ -293,7 +293,7 @@ function chooseScore(score: number) {
     store.currentScore = score;
     store.currentSpecialTag = undefined;
   }
-  store.currentTextSign = false;
+  store.currentSpecialTagType = undefined;
 }
 
 let keyPressTimestamp = 0;

src/features/mark/MarkBody.vue

@@ -6,9 +6,15 @@
   />
   <div class="cursor">
     <div class="cursor-border">
-      <span class="text">{{
-        store.currentSpecialTag ||
-        (Object.is(store.currentScore, -0) ? "空" : store.currentScore)
+      <span v-if="store.currentSpecialTagType === 'TEXT'" class="text">文</span>
+      <span v-else-if="store.currentSpecialTagType === 'RIGHT'" class="text">
+        <CheckOutlined
+      /></span>
+      <span v-else-if="store.currentSpecialTag" class="text">
+        {{ store.currentSpecialTag }}
+      </span>
+      <span v-else class="text">{{
+        Object.is(store.currentScore, -0) ? "空" : store.currentScore
       }}</span>
     </div>
   </div>
@@ -21,6 +27,8 @@ import { store } from "@/store/store";
 import { SliceImage, SpecialTag, Track } from "@/types";
 import CustomCursor from "custom-cursor.js";
 import CommonMarkBody from "./CommonMarkBody.vue";
+import { CheckOutlined } from "@ant-design/icons-vue";
+
 // import { message } from "ant-design-vue";
 // 开启本组件，测试后台在整卷的还原效果
 // import MarkBody from "@/features/student/studentInspect/MarkBody.vue";
@@ -139,9 +147,11 @@ const makeSpecialTagTrack = (
   // console.log(item);
   if (!store.currentTask || typeof store.currentSpecialTag === "undefined")
     return;
+
   const target = event.target as HTMLImageElement;
   const track: SpecialTag = {
     tagName: store.currentSpecialTag,
+    tagType: store.currentSpecialTagType,
     offsetIndex: item.indexInSliceUrls,
     offsetX: Math.round(
       event.offsetX * (target.naturalWidth / target.width) + item.dx
@@ -178,8 +188,15 @@ const makeTrack = (
   maxSliceWidth: number,
   theFinalHeight: number
 ) => {
-  if (store.setting.uiSetting["specialTag.modal"] && store.currentSpecialTag) {
+  if (
+    store.setting.uiSetting["specialTag.modal"] &&
+    store.currentSpecialTagType
+  ) {
     makeSpecialTagTrack(event, item, maxSliceWidth, theFinalHeight);
+    if (store.currentSpecialTagType === "TEXT") {
+      store.currentSpecialTag = undefined;
+      store.currentSpecialTagType = undefined;
+    }
   } else {
     makeScoreTrack(event, item, maxSliceWidth, theFinalHeight);
   }

src/features/mark/MarkDrawTrack.vue

@@ -18,8 +18,26 @@
     </template>
   </transition-group>
   <template v-for="(tag, index) in specialTagList" :key="index">
-    <div class="score-container" :style="computeTopAndLeft(tag)">
-      <span class="tw-m-auto">
+    <div
+      :class="['score-container', { 'no-event': tag.tagType !== 'TEXT' }]"
+      :style="computeTopAndLeft(tag)"
+      @keypress.stop
+      @mousemove.stop
+      @mousedown.stop
+      @mouseup.stop
+    >
+      <template v-if="tag.tagType === 'RIGHT'">
+        <CheckOutlined class="tw-m-auto" />
+      </template>
+      <template v-else-if="tag.tagType === 'TEXT'">
+        <a-textarea
+          v-model:value="tag.tagName"
+          class="tag-textarea tw-m-auto"
+          :autosize="{ minRows: 2, maxRows: 6 }"
+          :maxlength="32"
+        />
+      </template>
+      <span v-else class="tw-m-auto">
         {{ tag.tagName }}
       </span>
     </div>
@@ -31,6 +49,7 @@ import type { SpecialTag, Track } from "@/types";
 import { toRefs, watch, nextTick, computed } from "vue";
 import { store } from "@/store/store";
 import { message } from "ant-design-vue";
+import { CheckOutlined } from "@ant-design/icons-vue";
 import { useRoute } from "vue-router";
 const route = useRoute();
 
@@ -135,7 +154,10 @@ watch(
 <style scoped>
 .score-container {
   position: absolute;
+  z-index: 9;
   display: flex;
+  align-items: center;
+  justify-content: center;
   place-content: center;
   /* color: red; */
 
@@ -144,13 +166,28 @@ watch(
   height: 200px;
   margin-top: -100px;
   margin-left: -100px;
-
+}
+.score-container.no-event {
   /* to click through div */
   pointer-events: none;
 }
 .score-animation {
   animation: 1s ease-in-out 0s infinite alternate change_size;
 }
+.score-container .tag-textarea {
+  background-color: transparent;
+  color: red;
+  font-size: inherit;
+  resize: none;
+  line-height: 1.1;
+  border-color: transparent;
+  outline: none;
+}
+.score-container .tag-textarea:hover,
+.score-container .tag-textarea:focus {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-color: #f53f3f;
+}
 
 @keyframes change_size {
   from {

src/features/mark/MarkTool.vue

@@ -26,7 +26,7 @@
             v-model:value="store.setting.uiSetting['score.fontSize.scale']"
             :min="0.5"
             :step="0.1"
-            :max="2"
+            :max="3"
           />
         </div>
         <p>分数/标记大小</p>

src/features/mark/SpecialTagModal.vue

@@ -15,9 +15,9 @@
           :class="[
             'board-score',
             'score-icon',
-            { 'is-current': Object.is(store.currentSpecialTag, '√') },
+            { 'is-current': store.currentSpecialTag === '√' },
           ]"
-          @click="chooseSpecialTag('√')"
+          @click="chooseSpecialTag('√', 'RIGHT')"
         >
           <img src="@/assets/icons/icon-right.svg" />
         </div>
@@ -25,9 +25,11 @@
           :class="[
             'board-score',
             'score-icon',
-            { 'is-current': Object.is(store.currentSpecialTag, '乄') },
+            {
+              'is-current': store.currentSpecialTag === '乄',
+            },
           ]"
-          @click="chooseSpecialTag('乄')"
+          @click="chooseSpecialTag('乄', 'HALF_RIGTH')"
         >
           乄
         </div>
@@ -35,9 +37,9 @@
           :class="[
             'board-score',
             'score-icon',
-            { 'is-current': Object.is(store.currentSpecialTag, 'X') },
+            { 'is-current': store.currentSpecialTag === 'X' },
           ]"
-          @click="chooseSpecialTag('X')"
+          @click="chooseSpecialTag('X', 'WRONG')"
         >
           <img src="@/assets/icons/icon-wrong.svg" />
         </div>
@@ -45,10 +47,10 @@
           :class="[
             'board-score',
             'score-icon',
-            { 'is-current': Object.is(store.currentSpecialTag, '○') },
+            { 'is-current': store.currentSpecialTag === '○' },
           ]"
           title="标记圆圈"
-          @click="chooseSpecialTag('○')"
+          @click="chooseSpecialTag('○', 'CIRCLE')"
         >
           <img src="@/assets/icons/icon-circle.svg" />
         </div>
@@ -56,10 +58,10 @@
           :class="[
             'board-score',
             'score-icon',
-            { 'is-current': store.currentTextSign },
+            { 'is-current': store.currentSpecialTagType === 'TEXT' },
           ]"
           title="标记文本"
-          @click="chooseTextSign"
+          @click="chooseSpecialTag('', 'TEXT')"
         >
           <img class="icon-text" src="@/assets/icons/icon-text.svg" />
         </div>
@@ -110,19 +112,15 @@ function clearAllTagsOfCurrentTask() {
   store.currentTask.markResult.specialTagList = [];
 }
 
-function chooseSpecialTag(tagName: string) {
+function chooseSpecialTag(tagName: string, tagType: string) {
   if (store.currentSpecialTag === tagName) {
     store.currentSpecialTag = undefined;
+    store.currentSpecialTagType = undefined;
   } else {
     store.currentSpecialTag = tagName;
+    store.currentSpecialTagType = tagType;
     store.currentScore = undefined;
   }
-  store.currentTextSign = false;
-}
-function chooseTextSign() {
-  store.currentTextSign = !store.currentTextSign;
-  store.currentSpecialTag = undefined;
-  store.currentScore = undefined;
 }
 
 const close = () => {

src/store/store.ts

@@ -46,7 +46,7 @@ const initState: MarkStore = {
   currentQuestion: undefined,
   currentScore: undefined,
   currentSpecialTag: undefined,
-  currentTextSign: false,
+  currentSpecialTagType: undefined,
   historyOpen: false,
   historyTasks: [],
   removeScoreTracks: [],

src/styles/page.less

@@ -728,6 +728,11 @@
   }
   .single-image-container {
     position: relative;
+
+    > img {
+      position: relative;
+      z-index: 2;
+    }
   }
   .image-seperator {
     border: 2px solid transparent;

src/types/index.ts

@@ -40,8 +40,7 @@ export interface MarkStore {
   currentQuestion?: Question;
   currentScore?: number;
   currentSpecialTag?: string;
-  // 是否开启文本标记
-  currentTextSign?: boolean;
+  currentSpecialTagType?: SpecialTag.tagType;
   /** 是否打开回评侧边栏 */
   historyOpen: boolean;
   historyTasks: Array<Task>;
@@ -303,6 +302,7 @@ export interface SpecialTag {
   positionY: number;
   /** 特殊标记的字符串，勾叉 */
   tagName: string;
+  tagType: "TEXT" | "CIRCLE" | "RIGHT" | "WRONG" | "HALF_RIGTH";
   markerId?: number;
   color?: string;
   isByMultMark?: boolean;