use Ref Sugar (take 2)

src/App.vue

@@ -9,49 +9,20 @@
   />
 </template>
 
-<script lang="ts">
-import { defineComponent, ref, watch, watchEffect } from "vue";
+<script setup lang="ts">
+import { watch, watchEffect } from "vue";
 import { store } from "./features/mark/store";
-// import TestStatus from "./test/TestStatus.vue";
-// import TestSetting from "./test/TestSetting.vue";
-// import TestStore from "./test/TestStore.vue";
 
-export default defineComponent({
-  name: "App",
-  // components: {
-  //   TestStatus,
-  //   TestSetting,
-  //   TestStore,
-  // },
-  setup() {
-    const spinning = ref(false);
+let spinning = $ref(false);
 
-    watch(
-      () => store.globalMask,
-      () => (spinning.value = store.globalMask)
-    );
+watch(
+  () => store.globalMask,
+  () => (spinning = store.globalMask)
+);
 
-    watchEffect(() => {
-      const bodyScrollProp = spinning.value ? "hidden" : "auto";
-      document.body.style.overflow = bodyScrollProp;
-    });
-    return { spinning };
-  },
-  // beforeCreate() {
-  //   console.log("App.vue beforeCreate");
-  // },
-  // created() {
-  //   console.log("App.vue created");
-  // },
-  // beforeMount() {
-  //   console.log("App.vue beforeMount");
-  // },
-  // mounted() {
-  //   console.log("App.vue mounted");
-  // },
-  // updated() {
-  //   console.log("App.vue updated");
-  // },
+watchEffect(() => {
+  const bodyScrollProp = spinning ? "hidden" : "auto";
+  document.body.style.overflow = bodyScrollProp;
 });
 </script>
 

src/components/QmButton.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts">
-import { reactive, ref } from "vue";
+import { reactive } from "vue";
 
 // 默认loading一秒，以免重复点击
 export default {
@@ -26,10 +26,10 @@ export default {
     // @ts-ignore
     delete newAttrs["onClick"];
 
-    let inInterval = ref(false);
+    let inInterval = $ref(false);
     const insideClick = (e: MouseEvent) => {
-      inInterval.value = true;
-      setTimeout(() => (inInterval.value = false), props.clickTimeout);
+      inInterval = true;
+      setTimeout(() => (inInterval = false), props.clickTimeout);
       parentOnClick(e);
     };
     // newAttrs.onClick = insideClick;

src/components/QmDialog.vue

@@ -41,7 +41,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUpdated, reactive, ref } from "vue";
+import { onMounted, onUpdated, reactive } from "vue";
 import { CloseOutlined } from "@ant-design/icons-vue";
 import { store } from "@/features/mark/store";
 
@@ -78,8 +78,8 @@ if (savedStyle?.top) positionStyle.top = savedStyle?.top;
 if (savedStyle?.left) positionStyle.left = savedStyle?.left;
 if (savedStyle?.width) positionStyle.width = savedStyle?.width;
 if (savedStyle?.height) positionStyle.height = savedStyle?.height;
-const mouseHandler = ref(null as unknown as HTMLHeadElement);
-const resizeHandler = ref(null as unknown as HTMLDivElement);
+let mouseHandler = $ref(null as unknown as HTMLHeadElement);
+let resizeHandler = $ref(null as unknown as HTMLDivElement);
 
 const mousePosition = {
   offsetX: 0,
@@ -123,7 +123,7 @@ const handleDragMouseMove = (e: MouseEvent) => {
 const handleDragMouseUp = (e: MouseEvent) => {
   mousePosition.offsetX = 0;
   mousePosition.offsetY = 0;
-  mouseHandler.value.removeEventListener("mousedown", handleDragMouseDown);
+  mouseHandler.removeEventListener("mousedown", handleDragMouseDown);
   document.removeEventListener("mousemove", handleDragMouseMove);
   document.removeEventListener("mouseup", handleDragMouseUp);
 };
@@ -151,7 +151,7 @@ const handleResizeMouseMove = (e: MouseEvent) => {
 const handleResizeMouseUp = (e: MouseEvent) => {
   mousePosition.offsetX = 0;
   mousePosition.offsetY = 0;
-  resizeHandler.value.removeEventListener("mousedown", handleResizeMouseDown);
+  resizeHandler.removeEventListener("mousedown", handleResizeMouseDown);
   document.removeEventListener("mousemove", handleResizeMouseMove);
   document.removeEventListener("mouseup", handleResizeMouseUp);
 };

src/env.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="vue/ref-macros" />
 /// <reference types="vite/client" />
 
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }

src/features/arbitrate/Arbitrate.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, watch } from "vue";
 // 要共用UI就要共用store
 import {
   findCurrentTaskMarkResult,

src/features/library/inspect/MarkHeader.vue

@@ -97,7 +97,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted } from "vue";
 import { store, isScanImage } from "@/features/mark/store";
 import { PoweroffOutlined } from "@ant-design/icons-vue";
 import { useRoute } from "vue-router";
@@ -105,8 +105,8 @@ import { clearInspectedTask } from "@/api/libraryInspectPage";
 import ZoomPaper from "@/components/ZoomPaper.vue";
 
 const route = useRoute();
-let isSingleStudent = ref(false);
-isSingleStudent.value = !!route.query.studentId;
+let isSingleStudent = $ref(false);
+isSingleStudent = !!route.query.studentId;
 const { subjectCode, groupNumber } = route.query as {
   subjectCode: string;
   groupNumber: string;

src/features/mark/AllPaperModal.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import { CloseOutlined } from "@ant-design/icons-vue";
 import { store } from "@/features/mark/store";
 
@@ -42,7 +42,7 @@ const urls = computed(() => {
   return store.currentTask?.sliceUrls ?? [];
 });
 
-const checkedIndex = ref(0);
+let checkedIndex = $ref(0);
 </script>
 
 <style scoped>

src/features/mark/CommonMarkBody.vue

@@ -100,7 +100,7 @@ const { dragContainer } = dragImage();
 // end: 图片拖动
 
 const { addTimeout } = useTimers();
-let rotateBoard = ref(0);
+let rotateBoard = $ref(0);
 
 // start: 缩略图定位
 watch(
@@ -264,12 +264,12 @@ async function processSliceConfig() {
     accumTopHeight = accumBottomHeight;
   }
   // console.log("render: ", store.currentTask.secretNumber);
-  rotateBoard.value = 1;
+  rotateBoard = 1;
   setTimeout(() => {
     sliceImagesWithTrackList.splice(0);
     sliceImagesWithTrackList.push(...tempSliceImagesWithTrackList);
     setTimeout(() => {
-      rotateBoard.value = 0;
+      rotateBoard = 0;
     }, 300);
   }, 300);
 }
@@ -399,12 +399,12 @@ async function processSplitConfig() {
       }
     }
   }
-  rotateBoard.value = 1;
+  rotateBoard = 1;
   addTimeout(() => {
     sliceImagesWithTrackList.splice(0);
     sliceImagesWithTrackList.push(...tempSliceImagesWithTrackList);
     addTimeout(() => {
-      rotateBoard.value = 0;
+      rotateBoard = 0;
     }, 300);
   }, 300);
 }
@@ -503,12 +503,12 @@ const answerPaperScale = computed(() => {
 // end: 放大缩小和之后的滚动
 
 // start: 显示评分状态和清除轨迹
-const markStatus = ref("");
+let markStatus = $ref("");
 if (useMarkResult) {
   watch(
     () => store.currentTask,
     () => {
-      markStatus.value = getMarkStatus();
+      markStatus = getMarkStatus();
     }
   );
 

src/features/mark/Mark.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, watch } from "vue";
 import {
   clearMarkTask,
   getGroup,

src/features/mark/MarkBoardKeyBoard.vue

@@ -146,7 +146,7 @@
 <script setup lang="ts">
 import type { Question } from "@/types";
 import { isNumber } from "lodash";
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, onMounted, onUnmounted, watch } from "vue";
 import { store } from "./store";
 import { keyMouse } from "./use/keyboardAndMouse";
 import { autoChooseFirstQuestion } from "./use/autoChooseFirstQuestion";
@@ -162,20 +162,20 @@ const { chooseQuestion } = autoChooseFirstQuestion();
  * 当前题的输入串，初次是question.score，然后接收输入字符，回车时判断是否合法，合法则赋值给question.score
  * 切换到下一题，则重新开始
  *  */
-let scoreStr = ref("");
+let scoreStr = $ref("");
 watch(
   () => [store.currentQuestion, store.setting.uiSetting["normal.mode"]],
   () => {
     if (isNumber(store.currentQuestion?.score)) {
-      scoreStr.value = "" + store.currentQuestion?.score;
+      scoreStr = "" + store.currentQuestion?.score;
     } else {
-      scoreStr.value = "";
+      scoreStr = "";
     }
   },
   { immediate: true }
 );
 
-const questionScoreSteps = computed(() => {
+let questionScoreSteps = $computed(() => {
   const question = store.currentQuestion;
   if (!question) return [];
 
@@ -223,12 +223,12 @@ function numberKeyListener(event: KeyboardEvent) {
       isNumber(q.score)
     );
     // 如果所有题已赋分，并且当前题赋分和输入串和当前题分数一致，则可以在任意题提交
-    if (allScoreMarked && scoreStr.value === "" + store.currentQuestion.score) {
+    if (allScoreMarked && scoreStr === "" + store.currentQuestion.score) {
       submit();
       return;
     }
 
-    if (scoreStr.value.length === 0) {
+    if (scoreStr.length === 0) {
       message.error({ content: "请输入分数", duration: 5 });
       console.log("请输入分数");
       return;
@@ -239,30 +239,30 @@ function numberKeyListener(event: KeyboardEvent) {
     // 小数分 (开始和结束不为0，结束必须为1-9
     if (
       !(
-        scoreStr.value === "0" ||
-        /^0\.[1-9]\d*$/.test(scoreStr.value) ||
-        /^[1-9]\d*$/.test(scoreStr.value) ||
-        /^[1-9]\d*\.\d*[1-9]$/.test(scoreStr.value)
+        scoreStr === "0" ||
+        /^0\.[1-9]\d*$/.test(scoreStr) ||
+        /^[1-9]\d*$/.test(scoreStr) ||
+        /^[1-9]\d*\.\d*[1-9]$/.test(scoreStr)
       )
     ) {
       message.error({ content: "分数格式不正确", duration: 5 });
       console.log("分数格式不正确");
       return;
     }
-    const score = parseFloat(scoreStr.value);
+    const score = parseFloat(scoreStr);
     // console.log(score);
     if (!isNumber(score)) {
       message.error({ content: "非数字输入", duration: 5 });
       console.log("非数字输入");
       return;
     }
-    if (!questionScoreSteps.value.includes(score)) {
+    if (!questionScoreSteps.includes(score)) {
       message.error({ content: "输入的分数不在有效间隔内", duration: 5 });
       return;
     }
     store.currentQuestion.score = score;
     //
-    // scoreStr.value = "";
+    // scoreStr = "";
     // console.log("give score", score);
     const idx = indexOfCurrentQuestion() as number;
     if (idx + 1 < store.currentTask?.questionList.length) {
@@ -288,19 +288,19 @@ function numberKeyListener(event: KeyboardEvent) {
   }
   // 处理回退删除分数
   if (event.key === "Backspace") {
-    if (scoreStr.value.length > 0) {
-      scoreStr.value = scoreStr.value.slice(0, -1);
+    if (scoreStr.length > 0) {
+      scoreStr = scoreStr.slice(0, -1);
     } else {
       return;
     }
   }
   if (event.key === "Escape") {
-    scoreStr.value = "";
+    scoreStr = "";
   }
 
   // 此时不再接受任何非数字键
   if (".0123456789".includes(event.key)) {
-    scoreStr.value += event.key;
+    scoreStr += event.key;
   }
 }
 onMounted(() => {

src/features/mark/MarkChangeProfile.vue

@@ -41,7 +41,7 @@
 <script setup lang="ts">
 import { changeUserInfo, doLogout } from "@/api/markPage";
 import { message } from "ant-design-vue";
-import { ref, reactive, watchEffect } from "vue";
+import { reactive, watchEffect } from "vue";
 import { store } from "./store";
 
 interface User {
@@ -57,11 +57,11 @@ const user = reactive<User>({
 watchEffect(() => {
   user.name = store.setting.userName;
 });
-const visible = ref(false);
-const confirmLoading = ref(false);
+let visible = $ref(false);
+let confirmLoading = $ref(false);
 
 const showModal = () => {
-  visible.value = true;
+  visible = true;
 };
 
 const handleOk = () => {
@@ -79,12 +79,12 @@ const handleOk = () => {
       return;
     }
   }
-  confirmLoading.value = true;
+  confirmLoading = true;
   changeUserInfo(user.name, user.password)
     .then(() => doLogout())
     .finally(() => {
-      visible.value = false;
-      confirmLoading.value = false;
+      visible = false;
+      confirmLoading = false;
     });
 };
 

src/features/mark/MarkHeader.vue

@@ -328,7 +328,7 @@
 
 <script setup lang="ts">
 import { doLogout, updateUISetting } from "@/api/markPage";
-import { computed, ref, watch, watchEffect } from "vue";
+import { computed, watch, watchEffect } from "vue";
 import { store, isScanImage } from "./store";
 import { ModeEnum } from "@/types";
 import MarkChangeProfile from "./MarkChangeProfile.vue";
@@ -382,25 +382,25 @@ const logout = () => {
   doLogout();
 };
 
-const changeProfileRef = ref(null);
+let changeProfileRef = $ref(null);
 
 const openProfileModal = () => {
   // @ts-ignore
-  changeProfileRef.value?.showModal();
+  changeProfileRef?.showModal();
 };
 
-const switchGroupRef = ref(null);
+let switchGroupRef = $ref(null);
 
 const openSwitchGroupModal = () => {
   // @ts-ignore
-  switchGroupRef.value?.showModal();
+  switchGroupRef?.showModal();
 };
 
-const problemRef = ref(null);
+let problemRef = $ref(null);
 
 const openProblemModal = () => {
   // @ts-ignore
-  problemRef.value?.showModal();
+  problemRef?.showModal();
 };
 
 watchEffect(() => {
@@ -433,7 +433,7 @@ const todoMarkCountAnimated = computed(() => {
   if (store.status.totalCount === undefined) return "-";
   return Number(store.status.todoMarkCountTweenedNumber).toFixed(0);
 });
-let markCountChanged = ref(false);
+let markCountChanged = $ref(false);
 watch(
   () => [
     store.status.personCount,
@@ -445,8 +445,8 @@ watch(
       store.status.personCountTweenedNumber = 0;
       store.status.todoMarkCountTweenedNumber = 0;
     }
-    markCountChanged.value = true;
-    setTimeout(() => (markCountChanged.value = false), 3000);
+    markCountChanged = true;
+    setTimeout(() => (markCountChanged = false), 3000);
     gsap.to(store.status, {
       duration: 1.5,
       personCountTweenedNumber: personCount,

src/features/mark/MarkHistory.vue

@@ -123,7 +123,7 @@ import type {
   MarkHistorySortField,
   Task,
 } from "@/types";
-import { ref, watch } from "vue";
+import { watch } from "vue";
 import { store } from "./store";
 import {
   SearchOutlined,
@@ -153,14 +153,14 @@ const props = withDefaults(
   }
 );
 
-const secretNumberInput = ref("");
-const loading = ref(false);
-const currentPage = ref(1);
-const order = ref("markerTime" as MarkHistoryOrderBy);
+let secretNumberInput = $ref("");
+let loading = $ref(false);
+let currentPage = $ref(1);
+let order = $ref<MarkHistoryOrderBy>("markerTime");
 if (props.orderTimeField) {
-  order.value = props.orderTimeField;
+  order = props.orderTimeField;
 }
-const sort = ref("DESC" as MarkHistorySortField);
+let sort = $ref<MarkHistorySortField>("DESC");
 
 const currentTaskChange = async () => {
   if (store.historyOpen) {
@@ -168,10 +168,10 @@ const currentTaskChange = async () => {
     store.globalMask = true;
     try {
       await updateHistoryTask({
-        secretNumber: secretNumberInput.value,
-        order: order.value,
-        sort: sort.value,
-        pageNumber: currentPage.value,
+        secretNumber: secretNumberInput,
+        order: order,
+        sort: sort,
+        pageNumber: currentPage,
       });
     } catch (e) {
       // 恢复以前的行为，取回评失败则评卷任务为空
@@ -183,21 +183,21 @@ const currentTaskChange = async () => {
   } else {
     replaceCurrentTask(store.tasks[0]);
     store.historyTasks.splice(0);
-    secretNumberInput.value = "";
-    currentPage.value = 1;
-    order.value = "markerTime";
-    sort.value = "DESC";
+    secretNumberInput = "";
+    currentPage = 1;
+    order = "markerTime";
+    sort = "DESC";
   }
 };
 watch(() => store.historyOpen, currentTaskChange);
-watch([order, sort, currentPage], currentTaskChange);
+watch([$$(order), $$(sort), $$(currentPage)], currentTaskChange);
 
 EventBus.on("should-reload-history", async () => {
   // await updateHistoryTask({
-  //   secretNumber: secretNumberInput.value,
-  //   order: order.value,
-  //   sort: sort.value,
-  //   pageNumber: currentPage.value,
+  //   secretNumber: secretNumberInput,
+  //   order: order,
+  //   sort: sort,
+  //   pageNumber: currentPage,
   // });
   // // 提交后，渲染第一条
   // replaceCurrentTask(store.historyTasks[0]);
@@ -243,7 +243,7 @@ async function updateHistoryTask({
   sort = "DESC",
   secretNumber = null,
 }: HistoryQueryParams) {
-  loading.value = true;
+  loading = true;
   const res = await props.getHistory({
     pageNumber,
     pageSize,
@@ -255,7 +255,7 @@ async function updateHistoryTask({
     markerId: props.markerId,
     markerScore: props.markerScore,
   });
-  loading.value = false;
+  loading = false;
   if (res.data) {
     let data = cloneDeep(res.data) as Array<Task>;
     data = data.map((t) => {
@@ -288,29 +288,29 @@ function replaceCurrentTask(task: Task | undefined) {
 }
 
 function previousPage() {
-  if (currentPage.value > 1) {
-    currentPage.value -= 1;
+  if (currentPage > 1) {
+    currentPage -= 1;
   }
 }
 function nextPage() {
   if (store.historyTasks.length >= 20) {
-    currentPage.value += 1;
+    currentPage += 1;
   }
 }
 
 function toggleOrderBy(toOrder: MarkHistoryOrderBy) {
   if (props.showOrder) {
-    if (toOrder === order.value) {
-      sort.value = sort.value === "DESC" ? "ASC" : "DESC";
+    if (toOrder === order) {
+      sort = sort === "DESC" ? "ASC" : "DESC";
     } else {
-      order.value = toOrder;
+      order = toOrder;
     }
   }
 }
 
 function searchHistoryTask() {
-  if (currentPage.value !== 1) {
-    currentPage.value = 1;
+  if (currentPage !== 1) {
+    currentPage = 1;
   } else {
     currentTaskChange();
   }

src/features/mark/MarkProblemDialog.vue

@@ -30,14 +30,13 @@
 <script setup lang="ts">
 import { doProblemType, getStatus } from "@/api/markPage";
 import { message } from "ant-design-vue";
-import { ref } from "vue";
 import { removeCurrentMarkResult, store } from "./store";
 import EventBus from "@/plugins/eventBus";
 
-const visible = ref(false);
+let visible = $ref(false);
 
 const showModal = () => {
-  visible.value = true;
+  visible = true;
 };
 
 const removeSubmitedTask = () => {
@@ -72,7 +71,7 @@ const chooseProblemType = async (problemId: number) => {
     const res = await doProblemType(problemId);
     if (res?.data.success) {
       message.success({ content: "问题卷处理成功", duration: 3 });
-      visible.value = false;
+      visible = false;
       removeSubmitedTask();
       if (store.historyOpen) {
         EventBus.emit("should-reload-history");
@@ -90,7 +89,7 @@ const chooseProblemType = async (problemId: number) => {
 };
 
 const handleCancel = () => {
-  visible.value = false;
+  visible = false;
 };
 
 defineExpose({ showModal });

src/features/mark/MarkSwitchGroupDialog.vue

@@ -35,20 +35,20 @@
 <script setup lang="ts">
 import { doSwitchGroup, getGroups } from "@/api/markPage";
 import { message } from "ant-design-vue";
-import { ref, onUpdated } from "vue";
+import { onUpdated } from "vue";
 import { store } from "./store";
 
-const visible = ref(false);
+let visible = $ref(false);
 
 onUpdated(async () => {
-  if (visible.value) {
+  if (visible) {
     const groups = await getGroups();
     store.groups = groups.data;
   }
 });
 
 const showModal = () => {
-  visible.value = true;
+  visible = true;
 };
 
 const progress = (totalCount: number, markedCount: number) => {
@@ -84,7 +84,7 @@ const chooseGroup = async (markerId: number) => {
 };
 
 const handleCancel = () => {
-  visible.value = false;
+  visible = false;
 };
 
 defineExpose({ showModal });

src/features/mark/MinimapModal.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUpdate, ref, watch } from "vue";
+import { onBeforeUpdate, watch } from "vue";
 import { store } from "./store";
 
 // 切换任务后，关闭缩略图
@@ -27,10 +27,10 @@ watch(
   }
 );
 
-const imagesHtml = ref("");
+let imagesHtml = $ref("");
 
 onBeforeUpdate(() => {
-  imagesHtml.value =
+  imagesHtml =
     document.querySelector(".mark-body-container div:first-of-type")
       ?.innerHTML ?? "请关闭或重新打开";
   // 没取到图片，提示

src/features/mark/MultiMediaMarkBody.vue

@@ -66,7 +66,7 @@
 <script setup lang="ts">
 import { getJSON } from "@/api/jsonMark";
 import { store } from "./store";
-import { onUpdated, ref, watch } from "vue";
+import { onUpdated, watch } from "vue";
 import { renderRichText } from "@/utils/renderJSON";
 import type { RichTextJSON } from "@/types";
 import "viewerjs/dist/viewer.css";
@@ -97,7 +97,7 @@ interface QuestionForRender {
   options: Array<{ number: number; body: RichTextJSON }>;
 }
 
-const questions = ref([] as Array<QuestionForRender>);
+let questions = $ref([] as Array<QuestionForRender>);
 async function updateStudentAnswerJSON() {
   return getJSON(store.currentTask?.jsonUrl as string);
 }
@@ -118,7 +118,7 @@ function getDomByRichTextJSON(rt: Array<RichTextJSON> | RichTextJSON | null) {
 watch(
   () => store.currentTask,
   async () => {
-    questions.value.splice(0);
+    questions.splice(0);
     if (!store.currentTask?.jsonUrl) return;
     const res = await updateStudentAnswerJSON();
 
@@ -159,7 +159,7 @@ watch(
         questionForRender.studentAnswer = stuAns.answer;
         questionForRender.score = taskQuestion?.score || null;
         questionForRender.totalScore = taskQuestion?.maxScore || 0;
-        questions.value.push(questionForRender);
+        questions.push(questionForRender);
       }
     } else {
       for (const taskQuestion of store.currentTask?.questionList || []) {
@@ -190,7 +190,7 @@ watch(
         questionForRender.studentAnswer = stuAns.answer;
         questionForRender.score = taskQuestion.score;
         questionForRender.totalScore = taskQuestion.maxScore;
-        questions.value.push(questionForRender);
+        questions.push(questionForRender);
       }
     }
   },

src/features/mark/PaperModal.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import { store } from "./store";
 
 const paperPDFUrl = computed(() => {

src/features/mark/SheetViewModal.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, watch } from "vue";
+import { reactive, watch } from "vue";
 import { CloseOutlined } from "@ant-design/icons-vue";
 import { store } from "@/features/mark/store";
 import { loadImage } from "@/utils/utils";
@@ -74,7 +74,7 @@ watch(
   }
 );
 
-const checkedIndex = ref(0);
+let checkedIndex = $ref(0);
 
 function getDataUrlForSheetConfig(
   image: HTMLImageElement,

src/features/mark/use/draggable.ts

@@ -1,60 +1,60 @@
-import { onMounted, onUnmounted, ref } from "vue";
+import { onMounted, onUnmounted } from "vue";
 
 export function dragImage() {
   // grab moving
   let pos = { top: 0, left: 0, x: 0, y: 0 };
-  const dragContainer = ref(null as unknown as HTMLDivElement);
-  // const isGrabbing = ref(false);
+  let dragContainer = $ref(null as unknown as HTMLDivElement);
+  // let isGrabbing = $ref(false);
 
   const mouseDownHandler = function (e: MouseEvent) {
     // 防止鼠标左键激发
     if (e.button !== 0) return;
     pos = {
       // The current scroll
-      left: dragContainer.value.scrollLeft,
-      top: dragContainer.value.scrollTop,
+      left: dragContainer.scrollLeft,
+      top: dragContainer.scrollTop,
       // Get the current mouse position
       x: e.clientX,
       y: e.clientY,
     };
-    // isGrabbing.value = true;
-    if (dragContainer.value) {
-      dragContainer.value.style.cursor = "grabbing";
+    // isGrabbing = true;
+    if (dragContainer) {
+      dragContainer.style.cursor = "grabbing";
 
-      dragContainer.value.addEventListener("mousemove", mouseMoveHandler);
-      dragContainer.value.addEventListener("mouseup", mouseUpHandler);
+      dragContainer.addEventListener("mousemove", mouseMoveHandler);
+      dragContainer.addEventListener("mouseup", mouseUpHandler);
     }
   };
 
   const mouseMoveHandler = function (e: MouseEvent) {
-    // if (!isGrabbing.value) return;
+    // if (!isGrabbing) return;
     // How far the mouse has been moved
     const dx = e.clientX - pos.x;
     const dy = e.clientY - pos.y;
 
     // Scroll the element
-    dragContainer.value.scrollTop = pos.top - dy;
-    dragContainer.value.scrollLeft = pos.left - dx;
+    dragContainer.scrollTop = pos.top - dy;
+    dragContainer.scrollLeft = pos.left - dx;
   };
   const mouseUpHandler = function () {
-    // isGrabbing.value = false;
-    if (dragContainer.value) {
-      dragContainer.value.removeEventListener("mousemove", mouseMoveHandler);
-      dragContainer.value.removeEventListener("mouseup", mouseUpHandler);
-      dragContainer.value.style.cursor = "auto";
+    // isGrabbing = false;
+    if (dragContainer) {
+      dragContainer.removeEventListener("mousemove", mouseMoveHandler);
+      dragContainer.removeEventListener("mouseup", mouseUpHandler);
+      dragContainer.style.cursor = "auto";
     }
   };
 
   onMounted(() => {
-    if (dragContainer.value) {
-      dragContainer.value.addEventListener("mousedown", mouseDownHandler);
+    if (dragContainer) {
+      dragContainer.addEventListener("mousedown", mouseDownHandler);
     }
   });
   onUnmounted(() => {
-    if (dragContainer.value) {
-      dragContainer.value.removeEventListener("mousedown", mouseDownHandler);
-      dragContainer.value.removeEventListener("mousemove", mouseMoveHandler);
-      dragContainer.value.removeEventListener("mouseup", mouseUpHandler);
+    if (dragContainer) {
+      dragContainer.removeEventListener("mousedown", mouseDownHandler);
+      dragContainer.removeEventListener("mousemove", mouseMoveHandler);
+      dragContainer.removeEventListener("mouseup", mouseUpHandler);
     }
   });
 

src/features/mark/use/splitPane.ts

@@ -1,21 +1,21 @@
-import { onMounted, onUnmounted, ref, watchEffect } from "vue";
+import { onMounted, onUnmounted, watchEffect } from "vue";
 
 export function dragSplitPane() {
   let pos = { y: 0 };
-  const dragSpliter = ref(null as unknown as HTMLDivElement);
-  let topPercent = ref(40);
+  let dragSpliter = $ref(null as unknown as HTMLDivElement);
+  let topPercent = $ref(40);
 
   const mouseDownHandler = function (e: MouseEvent) {
     // console.log(e);
-    if (e.target !== dragSpliter.value) return;
+    if (e.target !== dragSpliter) return;
     e.preventDefault();
     pos = {
       // Get the current mouse position
       y: e.clientY,
     };
-    // topPercent.value = 100 * e.offsetTop / e.target.parentElement.style.height;
-    if (dragSpliter.value) {
-      // dragSpliter.value.style.cursor = "row-resize";
+    // topPercent = 100 * e.offsetTop / e.target.parentElement.style.height;
+    if (dragSpliter) {
+      // dragSpliter.style.cursor = "row-resize";
       // console.log("add");
 
       document.addEventListener("mousemove", mouseMoveHandler);
@@ -29,10 +29,10 @@ export function dragSplitPane() {
     const dy = e.clientY - pos.y;
 
     // // Scroll the element
-    // // dragSpliter.value.style.marginTop =
-    // //   (parseFloat(dragSpliter.value.style.marginTop) || 0) + dy + "px";
-    dragSpliter.value.style.marginTop = dy + "px";
-    // console.log(dragSpliter.value.style.marginTop);
+    // // dragSpliter.style.marginTop =
+    // //   (parseFloat(dragSpliter.style.marginTop) || 0) + dy + "px";
+    dragSpliter.style.marginTop = dy + "px";
+    // console.log(dragSpliter.style.marginTop);
     const target = e.target as HTMLElement;
     const parent = target.parentElement;
     // console.log(getComputedStyle(e.target.parentElement).height);
@@ -42,9 +42,9 @@ export function dragSplitPane() {
     //   movementY: e.movementY,
     // });
     // if (parent)
-    //   topPercent.value =
+    //   topPercent =
     //     (100 * target.offsetTop) / parseFloat(getComputedStyle(parent).height);
-    // console.log("topPercent", topPercent.value);
+    // console.log("topPercent", topPercent);
     return false;
   };
 
@@ -52,20 +52,20 @@ export function dragSplitPane() {
     const dy = e.clientY - pos.y;
 
     // Scroll the element
-    // dragSpliter.value.style.marginTop =
-    //   (parseFloat(dragSpliter.value.style.marginTop) || 0) + dy + "px";
-    // dragSpliter.value.style.marginTop = dy + "px";
-    // console.log(dragSpliter.value.style.marginTop);
+    // dragSpliter.style.marginTop =
+    //   (parseFloat(dragSpliter.style.marginTop) || 0) + dy + "px";
+    // dragSpliter.style.marginTop = dy + "px";
+    // console.log(dragSpliter.style.marginTop);
     const target = e.target as HTMLElement;
     const parent = target.parentElement;
     // console.log(getComputedStyle(e.target.parentElement).height);
     // console.log("offsetTop", target.offsetTop);
     // TODO: 暂时不知道为啥有 140
     if (parent)
-      topPercent.value =
+      topPercent =
         (100 * target.offsetTop) / parseFloat(getComputedStyle(parent).height);
     // console.log({
-    //   topPercent: topPercent.value,
+    //   topPercent: topPercent,
     //   "parseFloat(getComputedStyle(parent).height)": parseFloat(
     //     getComputedStyle(parent).height
     //   ),
@@ -73,24 +73,24 @@ export function dragSplitPane() {
     // });
 
     // console.log("removed");
-    if (dragSpliter.value) {
+    if (dragSpliter) {
       document.removeEventListener("mousemove", mouseMoveHandler);
       document.removeEventListener("mouseup", mouseUpHandler);
-      // dragSpliter.value.style.cursor = "auto";
-      dragSpliter.value.style.marginTop = "0";
+      // dragSpliter.style.cursor = "auto";
+      dragSpliter.style.marginTop = "0";
     }
   };
 
   onMounted(() => {
     watchEffect(() => {
-      if (dragSpliter.value) {
+      if (dragSpliter) {
         // console.log("watchEffect");
         document.addEventListener("mousedown", mouseDownHandler);
       }
     });
   });
   onUnmounted(() => {
-    if (dragSpliter.value) {
+    if (dragSpliter) {
       document.removeEventListener("mousedown", mouseDownHandler);
       document.removeEventListener("mousemove", mouseMoveHandler);
       document.removeEventListener("mouseup", mouseUpHandler);

src/features/student/importInspect/ImportInspect.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted } from "vue";
 import {
   getInspectedSetting,
   getSingleInspectedTask,
@@ -35,9 +35,9 @@ const { studentId } = route.query as {
   studentId: string;
 };
 
-let studentIds = ref([] as Array<number>);
-let tagIds = ref([] as Array<number>);
-let currentStudentId = ref(0);
+let studentIds = $ref([] as Array<number>);
+let tagIds = $ref([] as Array<number>);
+let currentStudentId = $ref(0);
 
 async function updateSetting() {
   const settingRes = await getInspectedSetting(studentId);
@@ -54,8 +54,8 @@ async function updateSetting() {
   if (!settingRes.data.inspectCount) {
     store.message = settingRes.data.message;
   } else {
-    studentIds.value = settingRes.data.studentIds;
-    tagIds.value = settingRes.data.tagIds;
+    studentIds = settingRes.data.studentIds;
+    tagIds = settingRes.data.tagIds;
   }
 }
 // 要通过fetchTask调用
@@ -63,8 +63,8 @@ async function updateTask() {
   // const mkey = "fetch_task_key";
   message.info({ content: "获取任务中...", duration: 1.5 });
   let res;
-  if (currentStudentId.value) {
-    res = await getSingleInspectedTask("" + currentStudentId.value);
+  if (currentStudentId) {
+    res = await getSingleInspectedTask("" + currentStudentId);
   } else {
     return;
   }
@@ -84,34 +84,25 @@ async function updateTask() {
   }
 }
 
-const isCurrentTagged = computed(() =>
-  tagIds.value.includes(currentStudentId.value)
-);
-const isFirst = computed(
-  () => studentIds.value.indexOf(currentStudentId.value) === 0
-);
+const isCurrentTagged = computed(() => tagIds.includes(currentStudentId));
+const isFirst = computed(() => studentIds.indexOf(currentStudentId) === 0);
 const isLast = computed(
-  () =>
-    studentIds.value.indexOf(currentStudentId.value) ===
-    studentIds.value.length - 1
+  () => studentIds.indexOf(currentStudentId) === studentIds.length - 1
 );
 
 async function fetchTask(next: boolean, init?: boolean) {
   if (init) {
-    currentStudentId.value = studentIds.value[0];
-  } else if (isLast.value && next) {
-    return; // currentStudentId.value是最后一个不调用
-  } else if (isFirst.value && !next) {
-    return; // currentStudentId.value是第一个不调用
+    currentStudentId = studentIds[0];
+  } else if (isLast && next) {
+    return; // currentStudentId是最后一个不调用
+  } else if (isFirst && !next) {
+    return; // currentStudentId是第一个不调用
   } else {
-    currentStudentId.value =
-      studentIds.value[
-        studentIds.value.indexOf(currentStudentId.value) + (next ? 1 : -1)
-      ];
+    currentStudentId =
+      studentIds[studentIds.indexOf(currentStudentId) + (next ? 1 : -1)];
   }
-  if (!currentStudentId.value) return; // 无currentStudentId不调用
-  store.status.markedCount =
-    studentIds.value.indexOf(currentStudentId.value) + 1;
+  if (!currentStudentId) return; // 无currentStudentId不调用
+  store.status.markedCount = studentIds.indexOf(currentStudentId) + 1;
   await updateTask();
 }
 
@@ -127,19 +118,19 @@ const saveTaskToServer = async () => {
   const mkey = "save_task_key";
   message.loading({ content: "标记评卷任务...", key: mkey });
   const res = (await saveInspectedTask(
-    currentStudentId.value + "",
-    !isCurrentTagged.value + ""
+    currentStudentId + "",
+    !isCurrentTagged + ""
   )) as any;
   if (res.data.success) {
     message.success({
-      content: isCurrentTagged.value ? "取消标记成功" : "标记成功",
+      content: isCurrentTagged ? "取消标记成功" : "标记成功",
       key: mkey,
       duration: 2,
     });
-    if (isCurrentTagged.value) {
-      tagIds.value.splice(tagIds.value.indexOf(currentStudentId.value), 1);
+    if (isCurrentTagged) {
+      tagIds.splice(tagIds.indexOf(currentStudentId), 1);
     } else {
-      tagIds.value.push(currentStudentId.value);
+      tagIds.push(currentStudentId);
     }
   } else {
     console.log(res.data.message);

src/features/student/importInspect/MarkHeader.vue

@@ -87,15 +87,15 @@
 
 <script setup lang="ts">
 import { clearInspectedTask } from "@/api/inspectPage";
-import { onMounted, ref } from "vue";
+import { onMounted } from "vue";
 import { store, isScanImage } from "@/features/mark/store";
 import { PoweroffOutlined } from "@ant-design/icons-vue";
 import { useRoute } from "vue-router";
 import ZoomPaper from "@/components/ZoomPaper.vue";
 
 const route = useRoute();
-let isSingleStudent = ref(false);
-isSingleStudent.value = !!route.query.studentId;
+let isSingleStudent = $ref(false);
+isSingleStudent = !!route.query.studentId;
 const { studentId, subjectCode } = route.query as {
   studentId: string;
   subjectCode: string;

src/features/student/inspect/Inspect.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from "vue";
+import { computed, onMounted, watch } from "vue";
 import {
   clearInspectedTask,
   getInspectedSetting,

src/features/student/inspect/MarkBody.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, reactive, ref, watch } from "vue";
+import { computed, reactive, watch } from "vue";
 import { store } from "@/features/mark/store";
 import MarkDrawTrack from "./MarkDrawTrack.vue";
 import type { SpecialTag, Track } from "@/types";

src/features/student/inspect/MarkHeader.vue

@@ -96,19 +96,15 @@
 
 <script setup lang="ts">
 import { clearInspectedTask } from "@/api/inspectPage";
-import { onMounted, ref } from "vue";
+import { onMounted } from "vue";
 import { store, isScanImage } from "@/features/mark/store";
-import {
-  SnippetsOutlined,
-  UserOutlined,
-  PoweroffOutlined,
-} from "@ant-design/icons-vue";
+import { PoweroffOutlined } from "@ant-design/icons-vue";
 import { useRoute } from "vue-router";
 import ZoomPaper from "@/components/ZoomPaper.vue";
 
 const route = useRoute();
-let isSingleStudent = ref(false);
-isSingleStudent.value = !!route.query.studentId;
+let isSingleStudent = $ref(false);
+isSingleStudent = !!route.query.studentId;
 const { studentId, subjectCode } = route.query as {
   studentId: string;
   subjectCode: string;

src/test/TestSetting.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts">
-import { reactive, defineComponent, onMounted, toRefs } from "vue";
+import { defineComponent, onMounted } from "vue";
 import { getSetting } from "../api/markPage";
 import { store } from "@/features/mark/store";
 

vite.config.ts

@@ -9,7 +9,9 @@ const path = require("path");
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vue(),
+    vue({
+      refTransform: true,
+    }),
     ViteComponents({
       resolvers: [AntDesignVueResolver()],
       dts: true,