style & 复核回看时，重新刷新回看列表

src/features/inspect/Inspect.vue

@@ -2,7 +2,10 @@
   <div class="my-container">
     <mark-header />
     <div class="tw-flex tw-gap-1">
-      <mark-history @reload="reloadAndfetchTask" />
+      <mark-history
+        @reload="reloadAndfetchTask"
+        :should-reload="shouldReloadHistory"
+      />
       <mark-body />
       <MarkBoardInspect @inspect="saveTaskToServer" @reject="rejectQuestions" />
     </div>
@@ -10,7 +13,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted } from "vue";
+import { computed, defineComponent, onMounted, ref } from "vue";
 import {
   clearInspectedTask,
   getInspectedSetting,
@@ -100,6 +103,8 @@ export default defineComponent({
       if (store.currentTask) store.setting.subject = store.currentTask.subject;
     }
 
+    const shouldReloadHistory = ref(0);
+
     async function reloadAndfetchTask() {
       await updateClearTask();
       await fetchTask();
@@ -143,12 +148,18 @@ export default defineComponent({
       message.loading({ content: "保存评卷任务...", key: mkey });
       const res = (await saveInspectedTask(realStudentId.value)) as any;
       if (res.data.success && store.currentTask) {
-        store.currentTask = undefined;
         message.success({ content: "复核成功", key: mkey, duration: 2 });
-        if (!isSingleStudent) fetchTask();
-      } else {
+        if (!store.historyOpen) {
+          store.currentTask = undefined;
+          if (!isSingleStudent) fetchTask();
+        } else {
+          shouldReloadHistory.value = Date.now();
+        }
+      } else if (res.data.message) {
         console.log(res.data.message);
         message.error({ content: res.data.message, key: mkey, duration: 10 });
+      } else if (!store.currentTask) {
+        message.warn({ content: "暂无新任务", key: mkey, duration: 10 });
       }
     };
 
@@ -162,10 +173,17 @@ export default defineComponent({
       if (res.data.success && store.currentTask) {
         store.currentTask = undefined;
         message.success({ content: "打回成功", key: mkey, duration: 2 });
-        if (!isSingleStudent) fetchTask();
-      } else {
-        message.error({ content: res.data.message, key: mkey, duration: 10 });
+        if (!store.historyOpen) {
+          store.currentTask = undefined;
+          if (!isSingleStudent) fetchTask();
+        } else {
+          shouldReloadHistory.value = Date.now();
+        }
+      } else if (res.data.message) {
         console.log(res.data.message);
+        message.error({ content: res.data.message, key: mkey, duration: 10 });
+      } else if (!store.currentTask) {
+        message.warn({ content: "暂无新任务", key: mkey, duration: 10 });
       }
     };
 
@@ -175,6 +193,7 @@ export default defineComponent({
       reloadAndfetchTask,
       saveTaskToServer,
       rejectQuestions,
+      shouldReloadHistory,
     };
   },
 });

src/features/inspect/MarkBoardInspect.vue

@@ -10,27 +10,26 @@
 
     <div v-if="groups">
       <template v-for="(groupNumber, index) in groups" :key="index">
-        <div class="mb-2">
+        <div class="tw-mb-4">
           <div
-            class="tw-flex tw-justify-between"
+            class="tw-flex tw-justify-between tw-place-items-center"
             @mouseover="addFocusTrack(groupNumber, undefined, undefined)"
             @mouseleave="removeFocusTrack"
           >
             分组 {{ groupNumber }}
-            <div>
-              打回
-              <input
-                type="checkbox"
-                @click="groupClicked(groupNumber)"
-                :checked="groupChecked(groupNumber)"
-              />
-            </div>
+            <input
+              class="tw-my-auto"
+              title="打回"
+              type="checkbox"
+              @click="groupClicked(groupNumber)"
+              :checked="groupChecked(groupNumber)"
+            />
           </div>
           <div v-if="questions">
             <template v-for="(question, index) in questions" :key="index">
               <div
                 v-if="question.groupNumber === groupNumber"
-                class="question tw-rounded tw-flex tw-mb-1"
+                class="question tw-flex tw-place-items-center tw-mb-1 tw-ml-2 hover:tw-bg-gray-200"
                 @mouseover="
                   addFocusTrack(
                     undefined,
@@ -40,22 +39,20 @@
                 "
                 @mouseleave="removeFocusTrack"
               >
-                <div class="tw-flex-1">
+                <span class="tw-flex-1">
                   {{ question.title }} {{ question.mainNumber }}-{{
                     question.subNumber
                   }}
-                </div>
-                <div class="tw-flex-1 tw-text-center">
+                </span>
+                <span class="tw-flex-1 tw-text-center">
                   {{ question.score || 0 }}
-                </div>
-                <div>
-                  打回
-                  <input
-                    type="checkbox"
-                    @change="questionCheckChanged(question)"
-                    :checked="questionChecked(question)"
-                  />
-                </div>
+                </span>
+                <input
+                  title="打回"
+                  type="checkbox"
+                  @change="questionCheckChanged(question)"
+                  :checked="questionChecked(question)"
+                />
               </div>
             </template>
           </div>
@@ -239,8 +236,9 @@ export default defineComponent({
 }
 .question {
   min-width: 100px;
-  border: 1px solid grey;
+  border-bottom: 1px solid grey;
 }
+
 .current-question {
   border: 1px solid yellowgreen;
   background-color: lightblue;

src/features/inspect/MarkDrawTrack.vue

@@ -13,10 +13,17 @@
       </span>
     </div>
   </template>
+  <template v-for="(tag, index) in specialTagList" :key="index">
+    <div class="score-container" :style="computeTopAndLeft(tag)">
+      <span class="tw-m-auto">
+        {{ tag.tagName }}
+      </span>
+    </div>
+  </template>
 </template>
 
 <script lang="ts">
-import { Track } from "@/types";
+import { SpecialTag, Track } from "@/types";
 import { defineComponent, PropType, watch } from "vue";
 import { store } from "./store";
 
@@ -26,6 +33,9 @@ export default defineComponent({
     trackList: {
       type: Array as PropType<Array<Track>>,
     },
+    specialTagList: {
+      type: Array as PropType<Array<SpecialTag>>,
+    },
     originalImage: {
       type: Object as PropType<HTMLImageElement>,
       required: true,
@@ -35,18 +45,9 @@ export default defineComponent({
     const focusedTrack = (track: Track) => {
       return store.focusTracks.includes(track);
     };
-    const computeTopAndLeft = (track: Track) => {
+    const computeTopAndLeft = (track: Track | SpecialTag) => {
       const topInsideSlice = track.offsetY;
       const leftInsideSlice = track.offsetX;
-      // console.log({
-      //   topInsideSlice,
-      //   leftInsideSlice,
-      //   offx: track.offsetX,
-      //   offy: track.offsetY,
-      // });
-      // if (store.focusTracks.includes(track)) {
-      //   console.log("has track");
-      // }
       return {
         top: (topInsideSlice / originalImage.naturalHeight) * 100 + "%",
         left: (leftInsideSlice / originalImage.naturalWidth) * 100 + "%",

src/features/inspect/MarkHistory.vue

@@ -3,34 +3,43 @@
     :style="{ display: store.historyOpen ? 'block' : 'none' }"
     class="history-container tw-px-1"
   >
-    <div class="tw-p-1" style="text-align: end">
-      <a-button shape="circle" @click="store.historyOpen = false">
+    <div class="tw-p-1 tw-flex tw-justify-between tw-place-items-center">
+      <div class="tw-text-xl">回评</div>
+      <a-button
+        class="tw-content-end"
+        shape="circle"
+        @click="store.historyOpen = false"
+      >
         <template #icon><CloseOutlined /></template>
       </a-button>
     </div>
-    <div class="tw-flex tw-justify-between tw-mt-1 tw-mb-1">
+    <div class="tw-mt-1 tw-mb-1 tw-flex"></div>
+    <div class="tw-flex tw-justify-between">
       <div>编号</div>
       <div>时间</div>
       <div>分数</div>
     </div>
-    <div v-for="(task, index) of store.historyTasks" :key="index">
-      <div
-        @click="replaceCurrentTask(task)"
-        class="tw-flex tw-justify-between tw-h-6 tw-place-items-center tw-rounded tw-cursor-pointer"
-      >
-        <div>{{ task.secretNumber }}</div>
-        <div>
-          {{ task.inspectTime && $filters.datetimeFilter(task.inspectTime) }}
-        </div>
-        <div style="width: 30px; text-align: center">
-          {{ task.markerScore }}
+    <a-spin :spinning="loading" size="large" tip="Loading...">
+      <div v-for="(task, index) of store.historyTasks" :key="index">
+        <div
+          @click="replaceCurrentTask(task)"
+          class="tw-flex tw-justify-between tw-h-6 tw-place-items-center tw-rounded tw-cursor-pointer"
+          :class="store.currentTask === task && 'current-task'"
+        >
+          <div>{{ task.secretNumber }}</div>
+          <div>
+            {{ task.inspectTime && $filters.datetimeFilter(task.inspectTime) }}
+          </div>
+          <div style="width: 30px; text-align: center">
+            {{ task.markerScore }}
+          </div>
         </div>
       </div>
-    </div>
+    </a-spin>
     <div class="tw-flex tw-justify-between tw-place-content-center tw-mt-2">
-      <div @click="previousPage">上一页</div>
+      <a-button @click="previousPage">上一页</a-button>
       <div style="line-height: 30px">第{{ currentPage }}页</div>
-      <div @click="nextPage">下一页</div>
+      <a-button @click="nextPage">下一页</a-button>
     </div>
   </div>
 </template>
@@ -38,7 +47,7 @@
 <script lang="ts">
 import { getInspectedHistory } from "@/api/inspectPage";
 import { Task } from "@/types";
-import { defineComponent, reactive, ref, watchEffect } from "vue";
+import { defineComponent, ref, watch, watchEffect } from "vue";
 import { useRoute } from "vue-router";
 import { store } from "./store";
 import { CloseOutlined } from "@ant-design/icons-vue";
@@ -46,6 +55,9 @@ import { CloseOutlined } from "@ant-design/icons-vue";
 export default defineComponent({
   name: "MarkHistory",
   components: { CloseOutlined },
+  props: {
+    shouldReload: { type: Number, required: true },
+  },
   emits: ["reload"],
   setup(props, { emit }) {
     const route = useRoute();
@@ -63,6 +75,15 @@ export default defineComponent({
       }
     });
 
+    watch(
+      () => props.shouldReload,
+      async () => {
+        await updateHistoryTask({ pageNumber: currentPage.value });
+        // 提交后，渲染第一条
+        replaceCurrentTask(store.historyTasks[0]);
+      }
+    );
+
     const secretNumberInput = ref(null);
     const loading = ref(false);
     const currentPage = ref(1);
@@ -122,4 +143,7 @@ export default defineComponent({
   min-width: 250px;
   border-right: 1px solid grey;
 }
+.current-task {
+  background-color: aqua;
+}
 </style>

src/features/mark/Mark.vue

@@ -84,7 +84,7 @@ export default defineComponent({
     const { addInterval } = useTimers();
 
     async function updateMarkTask() {
-      const settingRes = await clearMarkTask();
+      await clearMarkTask();
     }
 
     async function updateSetting() {
@@ -101,7 +101,7 @@ export default defineComponent({
     }
     async function updateStatus() {
       const res = await getStatus();
-      store.status = res.data;
+      if (res.data.valid) store.status = res.data;
     }
     async function updateGroups() {
       const res = await getGroup();

src/features/mark/MarkHeader.vue

@@ -235,7 +235,6 @@ import { ModeEnum } from "@/types";
 import MarkChangeProfile from "./MarkChangeProfile.vue";
 import MarkSwitchGroupDialog from "./MarkSwitchGroupDialog.vue";
 import MarkProblemDialog from "./MarkProblemDialog.vue";
-import { message } from "ant-design-vue";
 
 export default defineComponent({
   name: "MarkHeader",