提示正评 、试评

docs/zIndex管理.md

@@ -0,0 +1,23 @@
+# 说明
+
+由于评卷端裁切图渲染，轨迹，浮动框，模态弹框，给分板隐藏/显示，众多区域动态叠加，需要给各个页面元素类型设置 z-index 层级范围，以免冲突。
+
+1. body 及默认元素：无 z-index
+1. 顶部导航条：无 z-index
+1. 回看：无 z-index
+1. ajax 请求加载进度条：1031
+1. 裁切图：无 z-index
+1. 轨迹：无 z-index
+1. 鼠标样式（显示当前选择的轨迹分）：1000
+1. 评卷状态（回看、打回）：1000
+1. 放大缩小：1001 （要高于鼠标样式带的分数）
+1. 给分版：1001
+1. 悬浮框：1020 (点击一下层级从 1020 开始+1)，最高为 5000，然后重置为 1000
+1. 小助手 popup：5500
+1. modal 弹出框：6000
+1. 全局遮罩层：6000
+1. 错误消息弹出框：6001
+1. 多媒体阅卷图片弹框：10000
+1. 全卷 & 原卷：99999 总是保证在最高的层级
+1. 研究生阅卷，鼠标右键点击图片显示大图供放大旋转：1000000 （理论上可以降低为 10000，如有必要再调整测试）
+1. ...

src/features/mark/Mark.vue

@@ -32,6 +32,19 @@
   <SheetViewModal />
   <SpecialTagModal />
   <ShortCutModal />
+  <a-spin
+    v-if="statusSpinning"
+    wrapperClassName="status-spin"
+    size="large"
+    :spinning="loadingStatusSpinning"
+  >
+    <div
+      style="height: 100vh"
+      class="tw-text-4xl tw-flex tw-items-center tw-justify-center tw-text-red-500"
+    >
+      {{ store.getStatusValueName }}
+    </div>
+  </a-spin>
 </template>
 
 <script setup lang="ts">
@@ -69,7 +82,25 @@ import { getPaper } from "@/api/jsonMark";
 import EventBus from "@/plugins/eventBus";
 import { getHistoryTask } from "@/api/markPage";
 
-const { addInterval } = useTimers();
+const { addInterval, addTimeout } = useTimers();
+
+//#region status spinning
+/** 试评、正评的页面提示 */
+let statusSpinning = $ref(true);
+/** 是否还在加载statusValue */
+let loadingStatusSpinning = $ref(true);
+
+watch(
+  () => store.setting.statusValue,
+  () => {
+    if (store.setting.statusValue) {
+      loadingStatusSpinning = false;
+      addTimeout(() => (statusSpinning = false), 3000);
+    }
+  }
+);
+
+//#endregion
 
 async function updateMarkTask() {
   await clearMarkTask();
@@ -363,4 +394,13 @@ const saveTaskToServer = async () => {
   width: 100%;
   overflow: clip;
 }
+.status-spin {
+  position: absolute;
+  top: 0;
+  left: 0;
+  min-width: max(var(--app-min-width), 100%);
+  height: 100vh;
+  z-index: 6000;
+  background-color: rgba(200, 200, 200, 0.7);
+}
 </style>

src/store/store.ts

@@ -27,7 +27,7 @@ export const useMarkStore = defineStore("mark", {
           "shortCut.modal": false,
           "score.fontSize.scale": 1,
         },
-        statusValue: "FORMAL",
+        statusValue: null as unknown as Setting["statusValue"],
         problemTypes: [],
         groupNumber: -987654, // 默认不可能的值
         groupTitle: "",
@@ -58,6 +58,13 @@ export const useMarkStore = defineStore("mark", {
     } as MarkStore;
   },
   getters: {
+    /** 获得statusValue的中文名 */
+    getStatusValueName() {
+      const st = store.setting.statusValue;
+      if (!st) return "";
+      if (st === "FORMAL") return "正评";
+      if (st === "TRIAL") return "试评";
+    },
     /** 当前任务。确保不为空，需在上文已经检查过 store.currentTask 不为空 */
     currentTaskEnsured(): Task {
       return store.currentTask!;

src/types/index.ts

@@ -71,8 +71,8 @@ export interface Setting {
   /** 强制标记是否开启 */
   forceSpecialTag: boolean;
   uiSetting: UISetting;
-  /** 只显示试评名称  TRIAL("试评"), FORMAL("正评"), FINISH("结束") */
-  statusValue: "TRIAL" | "FORMAL" | "FINISH";
+  /** 只显示试评名称 TRIAL("试评"), FORMAL("正评"), FINISH("结束"): 结束状态不会在评卷端出现 */
+  statusValue: "TRIAL" | "FORMAL";
   /** 问题卷类型 */
   problemTypes: Array<{ id: number; name: string }> | [];
   /** 当前评卷分组号 */